Vue 上传图片到七牛云实用攻略

vue 一般采用element  的upload 上传图片/文件。

首先，设定参数

参考Element  upload  文档

其次，如图所示，重点在于domain和qiniuaddr两个参数！     参考七牛云存储图片域名文档

然后  上传一定要先获取到七牛云token！我是采用axios  post获取。

返回的res.data赋值给token

接着，把返回的 file.name赋值给 key

this.QiNiuYun.key = `name_${file.name}`;

如图 上传成功/错误处理 函数

:on-success="uploadSuccess"    与       :on-error="uploadError"

七牛云返回的url地址

大功告成！

补充：

1.    this.uploadImageUrl  这个变量实际上是  图片真正的URL-----https地址！！！

2.    该方法是针对单图上传，如果想多图    将data 内的参数   limit：1   修改为需要的图片数量    ！！！

3.     注意！当后台需要你传递多张图片的url时，可采用 此方法！！！

 //拼接 url

                if(this.uploadImageList===''){

                    this.uploadImageList= this.uploadImageUrl;

                }else{

                    this.uploadImageList=this.uploadImageList+';'+ this.uploadImageUrl;

                }