wxml中
<view
wx:for="{{detailImageList}}"
wx:for-item="item"
wx:for-index="index"
wx:key="index"
data-url="{{detailImageList[index]}}"
catchtap="ViewImgPop"
data-index="{{index}}"
class="product-picture-item"
>
<image class="product-picture-img" src="{{detailImageList[index]}}" mode="aspectFill"></image>
<view class="product-item-close" data-index="{{index}}" catchtap="handleRemove">
<image class="img-close" src="https://akim-oss.aikucun.com/b2cf17403df560247ff69f9fe21289289f05867c_1690962353673_60.png"></image>
</view>
</view>
<view class="chooseimage" catchtap="addMoreImg" wx:if="{{detailImageList.length<imgMaxNumber}}"> <view class="addWord">添加图片</view></view>
</view>
重点!!
js
添加图片
①图片一次选择多个,e.detail为数组
②每次url数据需要判断原先imglist是否已有url,如有需要拼接到数组中
③判断filetype是否都为image(调用的组件也可以过滤只显示图片)
async handleAddImg(e) {
const imgList = this.data.detailImageList;
let resImg = [];
const arr = e.detail;
const newArr = arr.map((item) => item?.url);
const isImg = arr.every((item) => item?.fileType === 'image');
if (isImg) {
if (!imgList || imgList.length === 0) {
//不加!imgList报错,因为可能不为数组无法获取length
resImg = newArr;
} else {
resImg = imgList.concat(newArr);
}
this.setData({ detailImageList: resImg });
} else {
// wx.showToast({
// title: '请上传图片',
// icon: 'none',
// });
}
},
删除图片
handleRemove(e) {
this.data.detailImageList.splice(e.currentTarget.dataset.index, 1);
this.setData({
detailImageList: this.data.detailImageList,
});
},
替换视频
replaceImage(e) {
let resImg = this.data.detailImageList;
resImg[this.data.currentImgId] = e.detail;
this.setData({
detailImageList: resImg,
});
},
限制最大张数
记录当前张数,maxImageNumber-currentImageNumber
上传视频同理,但要加一张封面url
const thumbnail = `${e.detail[0].url}?vframe/jpeg/offset/1/w/${videoCoverWidth}/h/${videoCoverHeight}`;