關於小程序上傳圖片到七牛的總結


最近在小程序中做到了頭像上傳這個功能,本來是挺簡單的一個功能,但是這次是讓我直接將圖片上傳到雲儲存,把返回的路徑直接傳給后台數據庫存起來

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.  最后把這個完整的圖片地址再次傳送給后台,一切完美解決


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM