[组件封装]微信小程序-图片批量上传照片墙

描述

批量上传图片， 可设置最大上传个数， 可删除， 可设置默认值。

效果

源码

pictures-wall.wxml

<view class="picturesWall">
<view class="picBox" wx:for="{{mydata}}" wx:key="{{index}}">
<image class="pic" src="{{item.filePath || item.url}}" /> <view class="picDelete" data-index="{{index}}" bindtap="handleImageDelete">x</view>
</view>
<view class="picBox" wx:if="{{canUseCount > 0}}" bindtap="handleUpload">
<view class="addicon"></view>
</view>
</view>


pictures-wall.js

Component({
properties: {
mydata: Array,
mymaxcount: Number,
}, data: {
value: [], // 暂存上传结果
canUseCount: 0, // 可使用个数
}, observers: {
'mydata, mymaxcount': function (mydata, mymaxcount) {
this.setData({ canUseCount: (mymaxcount || 3) - mydata.length });
},
}, methods: {
handleUpload: function () {
const { canUseCount } = this.data;
wx.chooseImage({
count: canUseCount,
success: (res) => {
wx.showLoading();
Promise.all(res.tempFilePaths.map(d => this.uploadFile(d)))
.finally(() => { // app.js中实现promise finally
wx.hideLoading();
this.triggerEvent('mychange', [...this.data.mydata, ...this.data.value]);
this.data.value = []; // 清空上传结果
})
}
})
}, uploadFile: function (filePath) {
return new Promise((resolve, reject) => {
wx.uploadFile({
url: '--url--',
filePath,
name: 'file',
success: (res) => {
if (res.statusCode === 200) {
let json = JSON.parse(res.data);
this.data.value.push({
filePath,
// 业务数据
});
resolve();
return;
}
reject();
},
fail: (err) => {
reject(err);
}
})
}) }, handleImageDelete: function ({ currentTarget: { dataset: { index } } }) {
const { mydata } = this.data;
mydata.splice(index, 1);
this.triggerEvent('mychange', mydata);
}, }})


pictures-wall.wxss

.picBox {
position: relative;
display: inline-block;
vertical-align: top;
width: 208rpx;
height: 208rpx;
margin-right: 26rpx;
margin-bottom: 26rpx;
border-radius: 4rpx;
border: 1px solid rgba(204,204,204,1);
}.pic {
width: 100%;
height: 100%;
}.picDelete {
position: absolute;
left: -32rpx;
top: -32rpx;
height: 64rpx;
width: 64rpx;
line-height: 64rpx;
text-align: center;
}.picturesWall .picBox:nth-child(3n) {
margin-right: 0;
}.addicon {
position: absolute;
display: inline-block;
left: 104rpx;
top: 54rpx;
height: 100rpx;
width: 0rpx;
border-right: 1px solid #CCCCCC;
}
.addicon::after {
content: '';
position: absolute;
top: 50rpx;
left: -50rpx;
display: block;
height: 0rpx;
width: 100rpx;
border-bottom: 1px solid #CCCCCC;
}


pictures-wall.json

{
"component": true,
"usingComponents": {}
}


app.js

由于微信小程序Promise finally， 所以要在app.js里实现一下。

App({
onLaunch: function () {
// finally
Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => { throw reason })
);
};
}, globalData: { }
})


使用例子

test.wxml

<pictures-wall mydata="{{picList}}" mymaxcount="{{9}}" bindmychange="handlePicturesChange" />
<pictures-wall mydata="{{picList1}}" mymaxcount="{{9}}" bindmychange="handlePicturesChange1" />


test.js

Page({
data: {
picList: [],
picList1: [{url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567767650570&di=e99314caaadc830e9b590311945cdbaa&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fh027%2Fh13%2Fimages201508311321540_info200X200.png'}],
}, handlePicturesChange: function ({ detail }) {
this.setData({ picList: detail })
},
handlePicturesChange1: function ({ detail }) {
this.setData({ picList1: detail })
},})


test.json

{
"navigationBarTitleText": "demo",
"usingComponents": {
"pictures-wall": "/components/pictures-wall/pictures-wall"
}
}