vue上传阿里oss

近期相中上传图片利用后端传递到阿里云服务器会慢一点,让后想着前端直接上传阿里云来提高带宽。记录一下

首先下载

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 怎么解决 谢谢!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值