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

需求

• 上傳圖片到服務器，在不一樣的設備上顯示

實現難點

有如下記錄點能夠做爲參考

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

思路分析

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/',
            })
          })
        })
      }
    })
  },

複製代碼

5. 這樣咱們就拿到圖片在七牛雲上的地址連接了 -- uploadPicture

備註

1. 以上的內容僅爲前端的參考，後臺是實現的部分包括直傳token，和域名domain
2. 大概瞭解了一下這個domain是公司申請的
3. 小程序如今尚未配置域名，後續須要將配置直傳的連接

• 做者簡介：黃傑，蘆葦科技web前端開發工程師 專一於前端領域框架、交互設計、圖像繪製、數據分析等研究，訪問 www.talkmoney.cn 瞭解更多