本文件只需将.js 文件中的url 变量替换成当前项目具体的图片上传地址即可使用，如有更好方法，请多指教，谢谢。
其中imgArr需要是数组，其实这个可以在组件里面转换判断，偷懒下，哈哈！！
prevent 是否阻止上传图片 布尔值；
maxCount 上传图片的最大张数 Number;
title 标题
imgLink 图片的地址，如果图片地址是已经在imgArr里面拼接好了的就可以传个空值即可，恩，就是这样;
本文仅供才考
.json 文件
{ "component": true, "usingComponents": {} }
.js 文件
const app = getApp(); Component({ properties: { imgArr: { type: Array, value: [], observer(newVal, oldVal, changedPath) { this.setData({ count: this.data.maxCount - newVal.length }) } }, prevent: { type: Boolean, value: false }, maxCount: { type: Number }, title: { type: String }, imgLink: { type: String } }, data: { }, ready() { }, methods: { _addImg() { let _this = this; if (_this.data.count <= 0) { wx.showToast({ title: ‘最多只能上传‘ + _this.data.maxCount + ‘张图片‘, icon: ‘none‘, duration: 1000 }) return; } wx.chooseImage({ count: _this.data.count, success(res) { let tempFilePaths = res.tempFilePaths; let url = ‘‘; // 后端同学具体给的上传图片接口 for (let i in tempFilePaths) { wx.uploadFile({ url, filePath: tempFilePaths[i], name: ‘file‘, formData: { ‘path‘: tempFilePaths[i] }, success(res) { let data = JSON.parse(res.data); _this.setData({ imgLink: data.other.img_root }) if (!data.code) { let newArr = _this.data.imgArr.concat(data.data); _this.setData({ imgArr: newArr }) _this.triggerEvent(‘getArr‘, _this.data.imgArr); } else {
wx.showToast({
title:‘上传失败！请重新上传‘,
icon: ‘none‘,
duration: 1500
})
}
},
fail(res) {
wx.showToast({
title:‘上传失败！请重新上传‘,
icon: ‘none‘,
duration: 1500
})
} }) } } }) }, _onDelTab(e) { let idx = e.currentTarget.dataset.idx; this.data.imgArr.splice(idx, 1); this.setData({ imgArr: this.data.imgArr }) this.triggerEvent(‘getArr‘, this.data.imgArr); } } })
.wxml 文件
<view class=‘load-img‘> <view class=‘load-name‘ wx:if="{{title}}">{{title}}</view> <view class=‘load-box‘> <view class=‘img-item‘ wx:for="{{imgArr}}" wx:key="{{index}}"> <image src="{{imgLink + item}}"></image> <icon class=‘icon‘ type="clear" size="20" color=‘#EF4444‘ catchtap=‘_onDelTab‘ data-idx="{{index}}" wx:if="{{!prevent}}"/> </view> <image class=‘img-add‘ src=‘./add.png‘ bindtap=‘_addImg‘ wx:if="{{count > 0 && !prevent}}"></image> </view> </view>
.wxss 文件
/* 上传图片 */
.load-name {
height: 80rpx;
line-height: 80rpx;
font-size: 30rpx;
}
.load-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.img-item, .img-add {
position: relative;
width: 140rpx;
height: 140rpx;
margin-bottom: 20rpx;
}
.img-item {
margin-right: 20rpx;
}
.img-item image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.icon {
position: absolute;
top: 0;
right: 0;
}