微信小程序之本地上传图片

API说明： 

wx.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

OBJECT参数说明：

参数	类型	必填	说明
count	Number	否	最多可以选择的图片张数，默认9
sizeType	StringArray	否	original 原图，compressed 压缩图，默认二者都有
sourceType	StringArray	否	album 从相册选图，camera 使用相机，默认二者都有
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数	类型	说明	最低版本
tempFilePaths	StringArray	图片的本地文件路径列表
tempFiles	ObjectArray	图片的本地文件列表，每一项是一个 File 对象	1.2.0

File 对象结构如下:

字段	类型	说明
path	String	本地文件路径
size	Number	本地文件大小，单位：B

wx.previewImage(OBJECT)

预览图片。

OBJECT参数说明：

参数	类型	必填	说明
current	String	否	当前显示图片的链接，不填则默认为 urls 的第一张
urls	StringArray	是	需要预览的图片链接列表
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例：

<form bindsubmit='formSubmit'>
    <view class="weui-uploader__title">个人照片</view>
        <view class="weui-uploader__info">{{imageList.length}}/1</view>
    </view>
    <view class="weui-uploader__bd">
        <view class="weui-uploader__files">
            <block wx:for="{{imageList}}" wx:for-item="image">
                <view class="weui-uploader__file">
                    <image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
                </view>
            </block>
        </view>
        <view class="weui-uploader__input-box">
                    <view class="weui-uploader__input" bindtap="chooseImage"></view>
              </view>
                </view>
    <view class="weui-btn-area">
        <button class="weui-btn" type="primary" form-type='submit'>确定</button>
        <button class="weui-btn" type="default" form-type='reset'>取消</button>
    </view>
</form>

//上传
function upload(that, id) {
  if (that.data.imageList.length == 0) {
    return;
  }
  wx.uploadFile({
    url: '....', //仅为示例，非真实的接口地址
    filePath: that.data.imageList[0],
    name: 'file',
    formData: {
      'id': id
    },
    success: function (res) {
      var data = res.data
      console.log(data);
      var json = JSON.parse(res.data); //
      wx.showToast({
        title: json.msg,
        icon: 'none',
        duration: 3000
      })
    }
  })
}

Page({
  data: {
    student: null,
    imageList: []
  },
  formSubmit: function (e) {
    console.log(e.detail.value);
    wx.request({
      url: '....',//仅为示例，非真实的接口地址
      method: 'POST',
      data: e.detail.value,
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: (res) => {
        console.log(res);
        if (res.error) {
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
          })
        } else {
          //上传照片
          upload(this, res.data.id);

          wx.showToast({
            title: '添加成功',
            icon: 'success',
            duration: 2000,
            success: function () {
              setTimeout(function () {
                wx.navigateTo({
                  url: '../index/index',
                })
              }, 2000)
            }
          })
        }

      }
    })
  },
  chooseImage: function () {
    var that = this
    wx.chooseImage({
      sourceType: ['album', 'camera'],
      sizeType: ['original', 'compressed'],
      count: 1,
      success: function (res) {
        console.log(res)
        that.setData({
          imageList: res.tempFilePaths
        })
      }
    })
  },
  previewImage: function (e) {
    var current = e.target.dataset.src

    wx.previewImage({
      current: current,
      urls: this.data.imageList
    })
  }
})