[WeChat applet] Upload single and multiple pictures

Upload a single image and display it, 

<button bindtap="upimg" class='jia_img' >上传</button>
<image src="{{tempFilePaths[0]}}"></image>
data{
tempFilePaths:[];
},
  upimg: function () {
    wx.chooseImage({
      success: function (res) {
        var data = {
          program_id: app.jtappid
        }
        var tempFilePaths = res.tempFilePaths //picture
        wx.uploadFile({
          url: 'aaa.cn', //Just an example, not the real interface address
          filePath: tempFilePaths[0],
          name: 'add_image', //The parameter name corresponding to the file (key)
          formData: data, //Other form information
          success: function (res) {
          }
        })
      }
    })
  },

Upload multiple images and display:
<view class="big-logos">
  <image bindtap="upimg" src='../../../image/s.png'></image>
  <block wx:for="{{img_arr}}" wx:key="index">
    <view class='logoinfo'>
      <text class='xxx' bindtap='xxx' data-index='{{index}}'>x</text>
      <image src='{{item}}'></image>
    </view>
  </block>
</view>
<button class='top_20 btn' bindtap="upconfirm">确定</button>
  upconfirm: function () {
    this.up();
  },
  up: function () {
    var that = this;
    data = {
      openid: app.openid,
      program_id: app.program_id,
      only_num: only_num
    }
    wx.uploadFile({
      url: 'pg.php/Aishen/upload_photo',
      filePath: that.data.img_arr[i],
      name: 'image', //The parameter name corresponding to the file (key)
      formData: data, //Other form information
      success: function (res) {
      }, complete: function (complete) {
        console.log(complete)
        i++
        if (i == that.data.img_arr.length) {
          util.request('https://sz800800.cn/pg.php/Aishen/uploade_photo_r', 'post', { 'only_num': only_num }, 'Loading data', function (res) {
            console.log(res)
            if (res.data.state == 1) {
              wx.showModal({
                title: 'Tips',
                content: 'Submitted successfully!',
                success: function (res) {
                  that.onLoad()
                  wx.navigateBack({
                    delta: 1
                  })
                }
              })
            } else {
              wx.showModal({
                title: 'Tips',
                content: 'Submission failed, please resubmit!',
              })
            }
          })
        } else if (i < that.data.img_arr.length) {//If the picture has not been transmitted, continue to call the function
          that.up()
        }
      }
    })
  },

  // upload
  upimg: function () {
    var that = this;
    if (this.data.img_arr.length < 12) {
      wx.chooseImage({
        sizeType: ['original', 'compressed'],
        success: function (res) {
          that.setData({
            img_arr: that.data.img_arr.concat(res.tempFilePaths)
          })
          num = that.data.img_arr.length
        }
      })
    } else {
      wx.showToast({
        title: 'Up to 12 images can be uploaded',
        icon: 'loading',
        duration: 3000
      });
    }
  },







Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325349213&siteId=291194637