1.微信小程序实现多图上传. 单图上传
下面是具体代码
wxml 部分
<!--遍历数组files-->
<block wx:for="{{files}}" wx:for-item='img' wx:for-index="index">
<view class="imgwrap" hidden="{{!img.url}}">
<image class="imgs" src="{{img.url}}"></image>
</view>
</block>
<!--上传按钮-->
<view class="selectImg" bindtap="selectImg">
<image src="/pages/common/images/up.png"></image>
</view>
JS 部分
/**
- @description data里面存放两个变量
-
tempArrImg 存放在上传时临时数组,用于往files中填加的
-
files 最后提交的图片数组
*/
data:{
tempArrImg:[],
files: [],
}
async selectImg() {
let fileData = await this.uploadImg();
const fileUploader = app.globalData.mainURL + '/api/Upload/upload2';
const tempFilePaths = fileData.tempFilePaths;
wx.uploadFile({
url: fileUploader,
filePath: tempFilePaths[0],
name: 'file',
success:(res) => {
const data = JSON.parse(res.data);
let jsonImg = {
url: app.globalData.mainURL+data.src
};
this.data.tempArrImg.push(jsonImg);
this.setData({
files: this.data.tempArrImg
});
return;
}
});
},
uploadImg() {
return new Promise((resolve, reject) => {
wx.chooseImage({
success(data) {
resolve(data);
}
})
});
},