微信小程式上傳圖片至七牛

廣州蘆葦科技web前端發表於2018-12-15
微信小程式

需求

  • 上傳圖片到伺服器，在不同的裝置上顯示

實現難點

有以下記錄點可以作為參考

  • 常規思路解決問題時的不可行之處，比如實現過程中的報錯，踩坑等
  • 實現需求時的思路卡殼位置

思路分析

  1. wx.uploadFile(Object object)將本地資源上傳到開發者伺服器，客戶端發起一個 HTTPS POST請求，注意該請求的物件為測試服，而後臺搭建一個圖片上傳的伺服器比較麻煩，因此選擇使用方便的七牛雲
  2. 小程式的請求為https，因此與管理後臺的圖片上傳有所區別，但實現方法本質是一樣的
  3. 如何使用七牛雲的服務，檢視官方文件，或者百度看別人的教程，下面是我在topshow這個專案中使用的方法

實現

實現該需求可以分為以下4步

  1. 克隆 gpake/qiniu-wxapp-sdk 倉庫: git clone github.com/gpake/qiniu…

  2. 在 SDK 目錄下找到 qiniuUploader.js 檔案，在需要使用上傳功能的頁面引用 qiniuUploader.js 檔案， 該方法四個引數，上傳成功的回撥函式返回了成功上傳圖片的連結

  3. 獲取七牛直傳的token，調取後臺介面文件七牛模組的前端使用介面，獲取token和域名

    獲取token的介面和上傳七牛雲的介面涉及到一個非同步變同步操作的問題，因此引用了promise物件

  4. 調七牛直傳的介面，具體實現程式碼如下：

//app.js中 獲取七牛直傳的token，注意promise物件的使用
 fetchUptoken: function () {
        return new Promise(function(resolve, reject){
          wx.request({
            url: API.Qiniu.token,
            data: {},
            success: function(res){
              // success
              console.log(res.data.token)
             resolve(res)
            },
            fail: function() {
              // fail
            },
            complete: function() {
              // complete
            }
          })
        })
    },

//上傳圖片的page中
handleUploadImage: function () {
    const qiniuUploader = require("../../utils/qiniuUploader");
    let that = this;
    let {
      uploadPicture
    } = that.data
	// 通過微信的api選擇圖片，暫存到本地資料夾，並且通過路徑名可以拿到該圖片
    wx.chooseImage({
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'], 
      success: function (res) {
        let tempFilePaths = res.tempFilePaths; //選擇了多張圖片，但由於上傳七牛雲是單張上傳，因此需要迴圈調介面，注意是調兩個介面，獲取直傳token和七牛直傳的介面
        tempFilePaths.map((r,i) => {
          app.fetchUptoken().then(function(res){ //非同步變同步
            let uptoken = res.data.token
			//使用引入的qiniuUploader方法調七牛上傳的介面
            qiniuUploader.upload(
			r, //上傳的圖片
			(res) => {  //回撥 success
              console.log(res)
              uploadPicture.push(res.imageURL);
              that.setData({
                uploadPicture,
              })
              i == tempFilePaths.length - 1 && (
                that.uploadImage()
              )
            }, (error) => { //回撥 fail
              console.log('error: ' + error);
            }, 
            { // 引數設定  地區程式碼 token domain 和直傳的連結 注意七牛四個不同地域的連結不一樣，我使用的是華南地區
              region: 'SCN',
              uptoken: uptoken,
              uploadURL: 'https://up-z2.qbox.me',
              domain: 'http://ovkzx61hi.bkt.clouddn.com/',
            })
          })
        })
      }
    })
  },

複製程式碼
  1. 這樣我們就拿到圖片在七牛雲上的地址連結了 -- uploadPicture

備註

  1. 以上的內容僅為前端的參考，後臺是實現的部分包括直傳token，和域名domain
  2. 大概瞭解了一下這個domain是公司申請的
  3. 小程式現在還沒有配置域名，後續需要將配置直傳的連結

  • 作者簡介：黃傑，蘆葦科技web前端開發工程師 專注於前端領域框架、互動設計、影象繪製、資料分析等研究，訪問 www.talkmoney.cn 瞭解更多

相關文章