微信小程式 圖片上傳

選擇圖片，獲得臨時檔案路徑=>通過uploadFile上傳檔案=>獲取upload返回的圖片的src，進行顯示。
一個參考blog

選擇圖片

wx.chooseImage({
  count: 1, // 預設9
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
  sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有
  success: function (res) {
    // 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
    var tempFilePaths = res.tempFilePaths
  }
})

upload圖片

wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //僅為示例，非真實的介面地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData:{
        'user': 'test'
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

上傳的話這個事件必然會有一個上傳進度，考慮兩種邊界，太大和太小。

關於上傳這個事件：
使用者的操作，選好之後，點選上傳，等待上傳成功的通知，假設user點了上傳，但是實際上沒有上傳成功，那麼使用者就會迷惑了，所以點選上傳之後需要有一個上傳的進度條顯示。上傳成功後還要有一個清除明白的提醒，那麼如果使用者在上傳期間點了其他的操作，倘若會終止上傳，則，需要提示，確定要終止上傳嗎?需要讓user知道每一步操作的結果，這樣才不會迷惑。體驗才會稍微好一點。

關於進度條，小程式有這麼一個例子在。

const uploadTask = wx.uploadFile({
    url: 'http://example.weixin.qq.com/upload', //僅為示例，非真實的介面地址
    filePath: tempFilePaths[0],
    name: 'file',
    formData:{
        'user': 'test'
    },
    success: function(res){
        var data = res.data
        //do something
    }
})

uploadTask.onProgressUpdate((res) => {
    console.log('上傳進度', res.progress)
    console.log('已經上傳的資料長度', res.totalBytesSent)
    console.log('預期需要上傳的資料總長度', res.totalBytesExpectedToSend)
})

uploadTask.abort() // 取消上傳任務

具體到我們專案中就是：

uploadimage:function(){
    var that=this;
    wx.chooseImage({
      count: 1, // 預設9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有
      success: function (res) {
        // 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: 'http://business.chezhu.xin:8553/admin/upload/upload', //僅為示例，非真實的介面地址
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            'user': 'test'
          },
          success: function (res) {
            var data = res.data
            //do something
            console.log(res,'res')
          }
        })
      }
    })
  },

至此，待定，還需要優化進度條和一些提醒。