效果
wxml
<view class="weui-cell">
<view class="weui-cell__bd">
<view class="weui-uploader">
<view class="weui-uploader__hd">
<view class="weui-uploader__title">相关照片(最多三张)<text style="color:#f00;float:right" bindtap="deleteAllImage">删除全部</text>
</view>
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files" >
<view wx:for="{
{imgList}}">
<image class='weui-uploader__file' src="{
{item}}" />
</view>
</view>
<view class="weui-uploader__input-box" wx:if="{
{showAdd}}">
<view class="weui-uploader__input" bindtap="selectImage"></view>
</view>
</view>
</view>
</view>
</view>
js
selectImage() {
//选择图片
wx.chooseImage({
count: 3, //最多可以选择的图片张数
sizeType: ['original', 'compressed'], //所选的图片的尺寸,原图/原图
sourceType: ['album', 'camera'], //选择图片的来源,从相册选图 / 使用相机
success: res => {
// tempFilePath可以作为img标签的src属性显示图片
console.log(res)
const tempFilePaths = res.tempFilePaths
this.setData({
imgList: tempFilePaths
})
if (tempFilePaths.length == 3) {
this.setData({
showAdd: false
})
}
// wx.showToast({
// title: '正在上传...',
// icon: 'loading',
// mask: true,
// duration: 7000
// });
this.handleImage(); //处理图片转base64
}
})
},
handleImage: function () {
// 图片转base64
const that = this;
// 判断是否有图片
if (that.data.imgList.length !== 0) {
let imgs = []
for (let i = 0; i < that.data.imgList.length; i++) {
// 转base64
wx.getFileSystemManager().readFile({
filePath: that.data.imgList[i],//要读取的文件的路径 (本地路径)
encoding: "base64",//指定读取文件的字符编码,如果不传 encoding,则以 ArrayBuffer 格式读取文件的二进制内容
success: function (res) {
imgs.push('data:image/png;base64,' + res.data);
//转换完毕,执行上传
console.log(imgs);
that.setData({
imgs: imgs
})
// if (that.data.imgList.length == imgs.length) {
// }
}
})
}
} else {
wx.showToast({
title: "请先选择图片!",
icon: 'none',
duration: 3000
})
}
},