微信小程序 图片上传

选择图片，获得临时文件路径=>通过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')
          }
        })
      }
    })
  },

至此，待定，还需要优化进度条和一些提醒。