近期相中上传图片利用后端传递到阿里云服务器会慢一点，让后想着前端直接上传阿里云来提高带宽。记录一下
首先下载
npm install ali-oss //下载插件ali-oss
我利用的element-ui
<el-upload
class="avatar-uploader"
action="##"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:http-request="uploadImageOss"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<script>
import OSS from 'ali-oss'
import axios from 'axios'
import moment from 'moment'
uploadImageOss(file){
this.getFile(file)
}
async getFile({file}){
//首先调用后端接口获取oss配置
let stsData = await axios.post('接口地址').then(res=>res.data.data)
var parseMast = {
bucket:stsData.Credentials.bucket , // 这个可以找开通OSS的管理员拿，或者接口返回获取
region: stsData.Credentials.endpoint, // 同上
accessKeyId: stsData.Credentials.AccessKeyId, // 从接口返回的数据获取
accessKeySecret: stsData.Credentials.AccessKeySecret, // 同上
stsToken: stsData.Credentials.SecurityToken,//从接口返回的数据获取
secure: true
}
let client = new OSS(parseMast); // 调用OSS依赖
let name = file.name
let date = new Date
let dateFormat = moment(date).format('YYYYMMDD')
client.multipartUpload('CJ/'+dateFormat+'/'+name, file, )
.then(res=>{
console.log(res.res.requestUrls[0]);//上传成功
//so 这里有个小问题 如果上传的是利用微信截图的png图片 返回的链接会自动带一个
?uploadId=‘’ 返回的链接不能打开只能吧 ？ 之后的全部删除
我的处理方式是 利用后端接口返回的bucket + endpoint 进行了图片的拼接
'http://' +stsData.Credentials.bucket + '.' + stsData.Credentials.endpoint + '.aliyuncs.com/' + 'CJ/'+dateFormat+'/'+name
})
.catch(err=>{
console.log(err);//上传失败之后
})
}
</script>
有没有哪位大佬跟我说一下为什么会返回一个uploadId 怎么解决 谢谢！！
