微信小程序上传图片

效果图：

代码

.js

Page({
  data: {
    // 1张图片
    picturePathLocal:"",
    showPic: true,
    itemhide:false,


    // 多张图片
    uploaderList: [],
    uploaderNum: 0,
    showUpload: true
  },
  onLoad: function () {

  },
  /*********1、上传单张图片******************begin */
  //展示图片
  showImg: function (e) {
    var that = this;
    wx.previewImage({
      urls: that.data.picturePathLocal, 
    })
  },
  // 删除图片
  clearImg: function (e) {
    let that = this;
    that.setData({
      showPic: true,
      itemhide:false,
      picturePathLocal:""
    })
  },

  //选择图片
  choosePic: function (e) {
    var that = this;
    wx.chooseImage({
      count: 1, // 默认1
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res)
          that.setData({
            showPic: false,
            itemhide:true,
            picturePathLocal:res.tempFilePaths[0]
          })
      }
    })
  },
  /**
   * 上传图片
   * @param {*} e 
   */
  upload: function (e) {
    var that = this;
    // console.log("上传成功",that.data.picturePathLocal)
    wx.uploadFile({
      url: '上传的地址', //仅为示例，非真实的接口地址
      filePath: that.data.picturePathLocal,
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        console.log("上传成功",res)
        // const data = res.data
        //do something
      },fail(e){
        console.log("上传失败",e)
      }

    })
  },
  /*********1、上传单张图片******************end */

  /*********2、上传多张图片******************begin */
  //展示图片
  showImg_d: function (e) {
    var that = this;
    wx.previewImage({
      urls: that.data.uploaderList,
      current: that.data.uploaderList[e.currentTarget.dataset.index]
    })
  },
  // 删除图片
  clearImg_d: function (e) {
    var nowList = []; //新数据
    var uploaderList = this.data.uploaderList; //原数据

    for (let i = 0; i < uploaderList.length; i++) {
      if (i == e.currentTarget.dataset.index) {
        continue;
      } else {
        nowList.push(uploaderList[i])
      }
    }
    this.setData({
      uploaderNum: this.data.uploaderNum - 1,
      uploaderList: nowList,
      showUpload: true
    })
  },

  //选择图片
  choosePic_d: function (e) {
    var that = this;
    wx.chooseImage({
      count: 9 - that.data.uploaderNum, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res)
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths;
        let uploaderList = that.data.uploaderList.concat(tempFilePaths);
        if (uploaderList.length == 9) {
          that.setData({
            showUpload: false
          })
        }
        that.setData({
          uploaderList: uploaderList,
          uploaderNum: uploaderList.length,
        })
      }
    })
  },
  /*********2、上传多张图片******************end */

})

.wxml

<view class="view_contain">

	<text>上传单张图片</text>
	<view class="ui_uploader_cell">
		<view class='ui_uploader_item' wx:if="{{itemhide}}">
			<icon class='ui_uploader_item_icon' bindtap='clearImg' type="clear" size="20" color="red" />
			<image bindtap='showImg' src='{{picturePathLocal}}'></image>
		</view>
		<view class='ui_uploader' bindtap='choosePic' wx:if="{{showPic}}"></view>
	</view>
	<button bindtap="upload">上传</button>


	<!-- 上传多张图片 -->
	<text>上传多张图片</text>
	<view class="ui_uploader_cell">
		<view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="{{index}}">
			<icon class='ui_uploader_item_icon' bindtap='clearImg_d' data-index="{{index}}" type="clear" size="20" color="red" />
			<image bindtap='showImg_d' data-index="{{index}}" src='{{item}}'></image>
		</view>
		<view class='ui_uploader' bindtap='choosePic_d' wx:if="{{showUpload}}"></view>
	</view>

	<button>上传</button>
</view>

.wxss

.view_contain{
  display: flex;
  flex-direction: column;
}

/* uploader */
.ui_uploader_cell {
  width: 100%;
  padding: 40rpx;
  box-sizing: border-box;
}

.ui_uploader_item_1{
  float: left;
  position: relative;
  margin-right: 30rpx;
  margin-bottom: 30rpx;
  width: 165rpx;
  height: 165rpx;
  margin-left: 40rpx;
}
.ui_uploader_item{
  float: left;
  position: relative;
  margin-right: 30rpx;
  margin-bottom: 30rpx;
  width: 165rpx;
  height: 165rpx;
}
.ui_uploader_item_icon{
  position: absolute;
  right: -20rpx;
  top: -20rpx;
  background: #fff;
  border-radius: 50%;
}

.ui_uploader_item image {
  width: 100%;
  height: 100%;
}
/* 方框+号 */
.ui_uploader {
  float: left;
  position: relative;
  margin-right: 25rpx;
  margin-bottom: 25rpx;
  width: 165rpx;
  height: 165rpx;
  border: 2rpx solid #d9d9d9;
  box-sizing: border-box;
}
/* 方框+号 选择图片之前*/
.ui_uploader:before {
  content: " ";
  position: absolute;
  width: 4rpx;
  height: 79rpx;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}
/* 方框+号 选择图片之后*/
.ui_uploader:after {
  content: " ";
  position: absolute;
  height: 4rpx;
  width: 79rpx;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}