小程序上传图片笔记

小程序上传单个图片时，选择图片后即时上传到服务器，服务器返回图片路径并保存至data中，最后提交页面数据时一并将页面数据及返回路径提交

wxml:

<view class='item-ot'>
  <view class='itemTxt2'></view>
  <view class="item">
    <!-- 添加按钮 -->
    <view class="addIcon" bindtap="chooseImage2" wx:if="{{imgBoolean2}}">
        <view class=''>+</view>
    </view>
    <!-- 上传的图 -->
    <view class='itemImg' >
      <image src="{{legal_opposite_img}}" data-src="{{legal_opposite_img}}" bindtap="previewImage2"  mode="aspectFill" />
      <!-- 删除按钮 -->
      <view class="delete" bindtap="deleteImg2" data-index="{{index2}}">X</view>
    </view>
  </view>
</view>

js:

data: {
    uploadedImages: [],
    uploadedImages2: [],
    uploadedImages3: [],
    uploadedImages4: [],
    imgBoolean: true,
    imgBoolean2: true,
    imgBoolean3: true,
    imgBoolean4: true,
    legal_face_img: '',
    legal_opposite_img: '',
    business_img: '',
    legal_hand_img: '',
    up_legal_face_img: '',
    up_legal_opposite_img: '',
    up_business_img: '',
    up_legal_hand_img: ''
  },
chooseImage2: function (e) {
  var that = this;
  // 选择图片
  wx.chooseImage({
    count: 1, // 默认9，为1选择一张图片
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths;
      that.upload('up_legal_opposite_img', tempFilePaths);
      that.setData({
        legal_opposite_img: tempFilePaths[0],
        imgBoolean: false
      });
    }
  })
},
// 图片预览
previewImage: function (e) {
  var current = e.target.dataset.src
  wx.previewImage({
    current: current,
    urls: [current]
  })
  console.log("这是1" + current);
},
//删除图片
deleteImg: function (e) {
  var that = this;
  var images = that.data.uploadedImages;
  that.setData({
    uploadedImages: images,
    imgBoolean: true
  });
},
/**
 * 上传图片
 */
upload(imgPath, path) {
  let that = this;
  wx.showToast({
    icon: "loading",
    title: "正在上传"
  }),
  wx.uploadFile({
    url: "",
    filePath: path[0], // 上传一张图片
    name: 'file',
    header: {
      'Content-Type': 'application/json',
    },
    formData: {
      file: path[0]  // 上传一张图片
    },
    success: function (res) {
      console.log(res);
      if (res.statusCode != 200) {
        wx.showModal({
          title: '提示',
          content: '上传失败',
          showCancel: false
        })
        return;
      } else {
        that.setData({
          [imgPath]: JSON.parse(res.data).data[0]    //将返回的图片路径保存至data中，以供同其他数据一同提交
        })
      }
    },
    fail: function (e) {
      console.log(e);
      wx.showModal({
        title: '提示',
        content: '上传失败',
        showCancel: false
      })
    },
    complete: function () {
      wx.hideToast();  //隐藏Toast
    }
  })
},