本文共 2875 字，大约阅读时间需要 9 分钟。

效果图

功能： 上传，删除，预览，九宫格，多张上传，单张上传

wxml

JS

Page({  data: {    imgList:[]  },   upload(e){  //上传图片    let that=this;    let imgList = that.data.imgList;    let count = 9-imgList.length;    wx.chooseImage({      count: count, // 默认9      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有      success: function (res) {        wx.showLoading({          title: '图片上传中',        })        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片        var tempFilePaths = res.tempFilePaths        console.log(tempFilePaths)        let newDatas = {};        for (let keyName in datas) {          newDatas[keyName] = datas[keyName];        }        // 此处循环一个一个上传        for (let i = 0; i < tempFilePaths.length; i++) {        wx.uploadFile({          url: XXX, //仅为示例，非真实的接口地址          filePath: tempFilePaths[i],          name: '文件名字',          formData: newDatas,          success: function (res) {            console.log("res",res)            let datas = JSON.parse(JSON.parse(res.data).data);            console.log(datas)            // 图片展示所用            let imgList = that.data.imgList;            if (datas.code==200){              imgList.push(datas.response.file_path)              that.setData({                imgList              })                       wx.hideLoading();            }else{              wx.hideLoading();              wx.showModal({                title: '提示',                content: ‘失败’,                showCancel: false              })             }            //do something          }        })      }      },      fail:function(err){        console.log(err);      }    })      },    preview(e){  //预览图片    let img = e.currentTarget.dataset.src;    let imgList = this.data.imgList;    imgList.push(img);    wx.previewImage({      current: img, // 当前显示图片的http链接      urls: imgList// 需要预览的图片http链接列表    })  },    delImg(e){  //删除图片    let that = this;    console.log('点击删除图片===>',e);    let index = e.currentTarget.dataset.index;    let imgList = that.data.imgList;    wx.showModal({      title: '提示',      content: '删除该图片？',      confirmColor:'red',      success (res) {        if (res.confirm) {          console.log('用户点击确定')          imgList.splice(index,1);          that.setData({            imgList          })        } else if (res.cancel) {          console.log('用户点击取消')        }      }    })  }  )}

wxss

.img_box{  display: flex;  flex-wrap: wrap;  margin: 20rpx;  width: 100%;}.img_item_i{  display: block;  width: 100%;  height: 100%;}.add_icon{  display: block;  width: 50%;  height: 50%;}.img_item {  width: 30%;  height: 210rpx;  position: relative;  margin-right: 2%;  margin-bottom: 2%;  border: 1px solid #c0ccda;} .closeImv {  position: absolute;  right: 0rpx;  top: 0rpx;  width: 50rpx;  height: 50rpx;}

转载地址：http://ikzmf.baihongyu.com/