小程序开发笔记《五》上传图片、预览图片

上传图片是日常项目中经常遇到的功能，需要使用到wx.chooseImage(Object object)函数。

参数说明如下：

实现思路：

先调用小程序打开相机或从相册选图接口wx.chooseImage(Object object)，然后将返回的图片参数调用图片上传接口wx.uploadFile(Object object)，并将图片回显到页面，对图片绑定预览事件，预览的过程中用户可以进行保存图片、发送给朋友等操作。
js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrl:""
  },
  bigImage: function(e) {
    var src = e.currentTarget.dataset.src;
    var imgList = [];
    imgList.push(src);
    //图片预览
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
  },
  uploadPic: function() {
    var that_ = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        //请求上传图片接口
        wx.uploadFile({
          url: "url", //仅为示例，非真实的接口地址
          header: {
            'Authorization': wx.getStorageSync('Authorization')
          },
          filePath: tempFilePaths[0],
          name: 'uploadFile',
          formData: {
            'fileType': 'image',
            'resStr': JSON.stringify({
              remark: "上传照片"
            }).replace(/\"/g, "'")
          },
          success(res) {
            var data = JSON.parse(res.data)　
            console.log("data:" + res.data);
            if (data.data.ok == 1) {
              that_.setData({
                imgUrl: data.data.res.remoteUrl,
              })
            } else {
              wx.showToast({
                title: (data.data.msg),
                icon: 'none',
                duration: 1000,
                mask: true
              });
            }
          }
        })
      }
    })
  }
})

wxml:

    <view class="photo">
      <label>添加图片</label>
      <view bindtap="uploadPic">
        <image data-src='{{imgUrl}}' src='{{imgUrl}}' bindtap='bigImage'></image>
      </view>
    </view>

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe