Vue 上传图片到七牛云实用攻略
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 上传图片到七牛云实用攻略相关的知识,希望对你有一定的参考价值。
参考技术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;
以上是关于Vue 上传图片到七牛云实用攻略的主要内容,如果未能解决你的问题,请参考以下文章
ThinkPHP6上传图片七牛云 如何上传文件到七牛云对象储存cos