小程序图片上传

 实现小程序图片上传步骤:

一. 结构页面

1.写循环.

2.点击上传事件catchtap='_chooseImage'.

3.点击关闭事件catchtap='close'

  <view class='addImg'> 
    //循环
    <view class='addItem' wx:for='{{userImg}}'  wx-if="{{userImg.length>0}}">   
      <image class='image' src="{{item}}"></image>
      <image src='/images/closeImg.png' data-index="{{index}}" class='close' catchtap="close" ></image>
    </view> 
    <view class='addItem'>
      //此处用三元表达式显示不同的点击上传图片的背景图
      <image class='image' wx-if="{{!userImg||userImg.length<4}}" src="/images/addImg{{userImg.length==1?2:userImg.length==2?3:userImg.length==3?4:1}}.png"  catchtap='_chooseImage'></image>
    </view>          
  </view>

 二. JS部分

1.定义两个空数组     

 userImg用作结构html页面显示图片的循环体.

sendUserImg用来提交服务器返回的图片数据到后台. (因为后台不需要host, 所以多些一个数组, 后台无要求的话, 也可直接用userImg).

2.调用小程序的_chooseImage的api, 详细看代码注释.

3.删除功能close方法. 注释很详细啦啦啦~~   如有疑问欢迎留言!

var that;
Page({
    data:{
    userImg:[],// 在html中循环需要显示的图片
    sendUserImg:[],//用来提交到后台的数据, 后台不要host,所以多写一套数据
},  
onShow(){
    that=this;
},
// 选择图片 
  _chooseImage(e) {  
    wx.chooseImage({
      count: 1, // 默认9,可以写
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;            
        if (res.tempFiles[0].size / (1024 * 1024) >= 2) { 
          that.data.toastContent = '图片上传尺寸不能超过2M,请重新选择'
          that.openToastPannel(that.data.toastContent)
          return
        } 
        // 把图片上传到服务器
        // app.BaseUrl是host地址
        // '/api/feedbacks/feedbackUpload' 上传图片的接口地址, 由后台提供
        wx.uploadFile({
          url: app.BaseUrl + '/api/feedbacks/feedbackUpload', //仅为示例，非真实的接口地址
          filePath:tempFilePaths[0],
          name: 'file',
          header: {
            'content-type': 'multipart/form-data',
            'Authorization': 'Bearer ' + wx.getStorageSync("B-Token") //Authorization是后台需要的token
          },
          formData: {
            df:tempFilePaths
          },
          success: function (res) { 
            // 用来页面显示图片
            var Img = app.BaseUrl + JSON.parse(res.data).errmsg;           
            that.data.userImg.push(Img) 
            that.setData({
              userImg: that.data.userImg
            }) 
            // 由于后台不要host, 所以写了两套数据
            var sendImg = JSON.parse(res.data).errmsg;
            that.data.sendUserImg.push(sendImg)
            that.setData({
              sendUserImg: that.data.sendUserImg
            })
            // that.data.sendUserImg 此数据是已发送到服务器的图片, 由服务器返回后,发送到后台
          }
        })
      }
    })
  }, 
  // 删除图片
  close(e){  
    var index = e.currentTarget.dataset.index;
    // 删除
    this.data.userImg.map((v,i,arr)=>{    
      if(index== i){ 
        // 删除第i个, 共删除1个
        arr.splice(i,1) 
      }
    })
    //  给后台不用加host
    that.setData({
      userImg:that.data.userImg
    })
    this.data.sendUserImg.map((v, i, arr) => {
      if (index == i) {
        // 删除第i个, 共删除1个
        arr.splice(i, 1)
      }
    })
    that.setData({
      sendUserImg: that.data.sendUserImg
    })

    // that.data.sendUserImg 此数据是已发送到服务器的图片, 由服务器返回后,发送到后台

  },
})