用element ui上传图片到七牛踩过的坑

前端上传图片到七牛云的流程

1. 请求后端接口获取上传凭证
2. 请求七牛云地址上传图片到七牛云
3. 上传完毕将得到七牛云返回的图片地址

七牛云地址

说到七牛云地址，奴家真的是一把鼻涕一把泪
刚开始作图片上传的时候，没有好好看七牛云文档，结果跌了个大坑
后台把将预览地址当成上传地址给我，结果一直报错：Document not found

心塞，幸苦一位大神耐心指点，才从坑里跳出来
每一个七牛云存储区域都对应着相应的服务器端客户端上传域名
https://developer.qiniu.com/k...

token有了，域有了，我觉得我离成功只有一步之遥了（其实还差十万八千里）

多张图片上传

element ui里面的upload组件默认是当即上传图片，而咱们的需求是点击肯定按钮以后再上传多张图片

查看element ui关于upload组件的介绍发现auto-upload属性能够控制选取图片是否当即上传

因此下一步我把代码改为这样

这样作确实能够将多张图片上传到七牛云
哇，作到这一步真的是好开心（第一次用element ui上传图片到七牛云，见谅见谅！！！）
but。。。。。。
项目经理说，上传到七牛云的照片必须按照上传时间的格式从新命名，这个好说呀，我又将代码改为这个样子了

这下应该完美了吧！！！
测试一下，简直要炸了，炸了！！！
无论我提交几张图片，最后能上传的就只有一张图片，除了成功上传图片的那个请求，其余请求都返回错误：图片已存在。
what???宝宝内心想哭！！！
慌了，从新看一遍文档，各类百度，束手无策，还好在我绝望的前一秒，迎来了柳暗花明，哈哈哈。。。。。。

element ui上传多张图片到七牛云并对图片重命名

既然element ui默认的上传方式不行，那就只能用http-request属性来重写上传方式

因而，个人代码升级成这个样子

多张图片上传到七牛云以前对图片重命名，压缩，都在重写http-request时解决了