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

Posted 2023-03-21

参考技术A vue 一般采用element  的upload 上传图片/文件。

首先，设定参数

参考Element  upload  文档

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

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

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

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

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

大功告成！

补充：

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;