最近在小程序中做到了頭像上傳這個功能,本來是挺簡單的一個功能,但是這次是讓我直接將圖片上傳到雲儲存,把返回的路徑直接傳給后台數據庫存起來
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. 最后把這個完整的圖片地址再次傳送給后台,一切完美解決