关于小程序上传图片到七牛的总结
最近在小程序中做到了头像上传这个功能,本来是挺简单的一个功能,但是这次是让我直接将图片上传到云储存,把返回的路径直接传给后台数据库存起来
emm这就很蛋疼了,一直都是处于你给我接口,我照着要求填数据就行了的那种模式,突然来一个这个操作
而且七牛的官方文档也有点难以理解,反正我是看了一下午,没看懂一堆参数,或者是初始化是怎么配置的
坑是踩的有点多吧,差点心态爆炸了,最后还是依靠的万能的百度解决的
记录一下,算是个总结吧
步骤:
1. token还是必须要的,调取后台接口,获取到上传图片到七牛的许可(token),以及一个图片的前缀地址(缺少关键的hash)
2. 小程序配置uploadFile合法域名:
反正我是把中国的3个地区域名全给配置上了(谁让小程序每月限制修改次数)
https://upload.qiniup.com
https://upload-z1.qiniup.com
https://upload-z2.qiniup.com
3. 这一步其实很简单了(但是别去用官方文档给的那个API)
坑:官方API提供的qiniu.upload(xxx,xx)这个方法,说明也少,还有一堆参数,配置不知道怎么弄,原谅我的英语渣,但是还是觉得官方文档写的太烂
正:所以说我们为什么不用微信自带的上传呢?(一开始我也在纠结)
原文地址:https://blog.csdn.net/yibowanbo/article/details/80233107(再次感谢百度的强大,果然面向百度编程不是开玩笑的)
wx.uploadFile({ url: ‘https://upload-z2.qiniup.com‘, name: ‘file‘, filePath: this.data.headload, header: { "Content-Type": "multipart/form-data" }, formData: { token: this.data.loadToken, }, success: function (res) { let data = JSON.parse(res.data) console.log(res) // to do ... }, fail: function (res) { console.log(res) } })
其中filePath就是你要上传的文件的路径,formData中的token就是后台返回的token,填好之后,点击,搞定!
上传成功就会返回给你信息,其中有个json对象,里面的hash对应的值就是前面图片缺失的hash,取出来,拼接上,完毕,图片上传搞定
4. 最后把这个完整的图片地址再次传送给后台,一切完美解决