vue技术交流群(864583465)vue和elementUI项目引入七牛云

1. 获取七牛云的token,每次上传图片都会用到,作为上传凭证,通常是后端生成,前端调用后端给的接口拿到token即可
2. 利用elementUI组件el-upload完成图片的上传,代码示例:

   <el-upload
                 action="http://upload.qiniup.com"
                 :data="uploadData"
                 :limit="limit"
                 :file-list="fileList"
                 list-type="picture-card"
                 :on-success="uploadSuccess"
                 :on-preview="previewImg"
                 :on-remove="removeImg">
        <i class="el-icon-plus"></i>
      </el-upload>

参数解释:

action--上传的到七牛云的地址
data--上传时附带的参数,例如:   
uploadData:{
  token: '',
  key: this.uuid()
},

这里需要注意两点

1. 这里的key其实就是图片成功上传后,七牛云会返回回来的图片URL,通常是由前端指定,为了不重复,可以使用uuid()产生
2. 如果不指定key,七牛云返回来的参数也会有key,但是这个key是跟图片有关的,也就是说,只要是同一张图片不管你上传多少次,每次返回的key都是一样的,这就会导致一个问题,在A地方上传的图片IMG,当在B地方也上传了该图片,然后删除,在A地方就会加载不到该图片了,因此最好指定key

PS:欢迎加入vue技术交流群(864583465)进行更多问题的探讨,你的问题将是我们大家共同进步的关键

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值