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

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

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

七牛云地址

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

clipboard.png

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

clipboard.png

token有了,域有了,我以为我离成功只有一步之遥了(其实还差十万八千里)

多张图片上传

clipboard.png

element ui里面的upload组件默认是立即上传图片,而我们的需求是点击确定按钮之后再上传多张图片

clipboard.png

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

clipboard.png
所以下一步我把代码改成这样

clipboard.png

clipboard.png

clipboard.png

这样做确实可以将多张图片上传到七牛云
哇,做到这一步真的是好开心(第一次用element ui上传图片到七牛云,见谅见谅!!!)
but。。。。。。
项目经理说,上传到七牛云的照片必须按照上传时间的格式重新命名,这个好说呀,我又将代码改成这个样子了

clipboard.png
这下应该完美了吧!!!
测试一下,简直要炸了,炸了!!!
不管我提交几张图片,最后能上传的就只有一张图片,除了成功上传图片的那个请求,其他请求都返回错误:图片已存在。
what???宝宝心里想哭!!!
慌了,重新看一遍文档,各种百度,一筹莫展,还好在我绝望的前一秒,迎来了柳暗花明,哈哈哈。。。。。。

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

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

clipboard.png
于是,我的代码升级成这个样子

clipboard.png

clipboard.png

clipboard.png
多张图片上传到七牛云之前对图片重命名,压缩,都在重写http-request时解决了

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值