也是电商里做的上传评论图片之类的，如果用根据我文章中需要改的改一下就可以用了
首先是wxml
<view class="conts"><view class="img_box"><view class="imgs" wx:for="{{tempFilePaths}}" wx:key="index"><image src='{{item}}' bindlongpress="deleteImage" bindtap="listenerButtonPreviewImage" data-index="{{index}}" mode='widthFix' /></view><view class="imgs"><view class="images" bindtap="upload"><image src='/pages/img/shangchuantupian_l.png' mode='widthFix' /></view></view></view><view class="upload-img">上传图片</view></view>
接下来是wxss
.conts {height: auto;position: relative;margin: 0 auto;background-color: white;padding-bottom: 60rpx;}.currentWordNumber {font-size: 28rpx;color: gray;position: absolute;right: 10rpx;bottom: 10rpx;}.hint {font-size: 28rpx;position: absolute;left: 20rpx;bottom: 10rpx;color: #f60;}/* 图片 */.img_box {width: 690rpx;position: relative;display: flex;flex-wrap: wrap;margin: 0 auto;margin-top: 5px;}.imgs {width: 33.33333333%;display: flex;justify-content: center;margin-bottom: 20rpx;}.imgs image {width: 90%;max-height: 212rpx;border: 1px solid rgba(214, 212, 212, 0.1);/* box-shadow: 5rpx 5rpx 1rpx 3rpx #e2e0e0; */}.imgs .images {position: relative;}.images button {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}.img_box .images {width: 80%;height: 80px;border: 1px solid #e8e8e8;border-radius: 4rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 25px;}.img_box .images>image {width: 60rpx;height: 60rpx;}.upload-img{font-size: 24rpx;width: 40%;display: flex;justify-content: center;margin-top: -115rpx;}
最后是js
Page({/*** 页面的初始数据*/data: {},/*** 上传图片方法*/upload: function () {let that = this;wx.chooseImage({count: 9, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: res => {wx.showToast({title: '正在上传...',icon: 'loading',mask: true,duration: 1000})// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片let tempFilePaths = res.tempFilePaths;that.setData({tempFilePaths: tempFilePaths})/*** 上传完成后把文件上传到服务器*/var count = 0;for (var i = 0, h = tempFilePaths.length; i < h; i++) {//上传文件wx.uploadFile({url: app.URL,//这里输入你的接口路径filePath: tempFilePaths[i],//上面的文件路径name: 'img',//这个需要找后台拿，传入服务器的名字header: {"Content-Type": "multipart/form-data",},success: function (res) {console.log("k",res)},fail: function (res) {wx.hideToast();wx.showModal({title: '错误提示',content: '上传图片失败',showCancel: false,success: function (res) {}})}});}}})},/*** 预览图片方法*/listenerButtonPreviewImage: function (e) {let index = e.target.dataset.index;let that = this;wx.previewImage({current: that.data.tempFilePaths[index],urls: that.data.tempFilePaths,})},/*** 长按删除图片*/deleteImage: function (e) {var that = this;var tempFilePaths = that.data.tempFilePaths;var index = e.currentTarget.dataset.index; //获取当前长按图片下标wx.showModal({title: '提示',content: '确定要删除此图片吗？',success: function (res) {if (res.confirm) {console.log('点击确定了');tempFilePaths.splice(index, 1);} else if (res.cancel) {console.log('点击取消了');return false;}that.setData({tempFilePaths});}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},}）
这就是所有代码了，注释都在文中，应该一看就懂了吧。
