定義初始數(shù)據(jù)：
data: {
imgList: [], // 圖片集合
baseImg: [], // base64圖片集合
maxImg: 8, // 圖片上傳最高數(shù)量（根據(jù)需求設(shè)置）
}
第一步：從本地相冊選擇圖片或使用相機拍照（wx.chooseImage）
// 選擇圖片
selectPictures: function() {
const that = this;
// 最多上傳圖片數(shù)量
if (that.data.imgList.length < that.data.maxImg) {
wx.chooseImage({
count: that.data.maxImg - that.data.imgList.length, // 最多可以選擇的圖片張數(shù)（最大數(shù)量-當前已上傳數(shù)量）
sizeType: "compressed",
success: function(res) {
for (let i = 0; i < res.tempFilePaths.length; i++) {
that.data.imgList.push(res.tempFilePaths[i]);
}
// 顯示圖片（同步渲染到頁面）
that.setData({
imgList: that.data.imgList
})
}
})
} else {
wx.showToast({
title: "最多上傳" + that.data.maxImg + "張照片限寞！"
})
}
}
count：最多可以選擇的圖片張數(shù)（默認9）
sizeType：所選的圖片的尺寸（original-原圖，compressed-壓縮圖）
sourceType：選擇圖片的來源（album-從相冊選圖羡藐，camera-使用相機）
第二步：將圖片本地路徑轉(zhuǎn)為base64圖片格式（?wx.getFileSystemManager().readFile）
// 圖片轉(zhuǎn)base64
conversionAddress: function() {
const that = this;
// 判斷是否有圖片
if (that.data.imgList.length !== 0) {
for (let i = 0; i < that.data.imgList.length; i++) {
// 轉(zhuǎn)base64
wx.getFileSystemManager().readFile({
filePath: that.data.imgList[i],
encoding: "base64",
success: function(res) {
that.data.baseImg.push('data:image/png;base64,' + res.data);
//轉(zhuǎn)換完畢尾序，執(zhí)行上傳
if (that.data.imgList.length == that.data.baseImg.length) {
that.upCont(that.data.textCont, that.data.baseImg);
}
}
})
}
}
else {
wx.showToast({
title: "請先選擇圖片！"
})
}
}
filePath：要讀取的文件的路徑 (本地路徑)
encoding：指定讀取文件的字符編碼（ascii迷郑，base64枝恋，binary创倔，hex......）
第三步：執(zhí)行上傳，把圖片數(shù)組傳輸給后端即可
// 執(zhí)行上傳
upCont: function (baseImg) {
const that = this;
wx.request({
url: "上傳地址",
method: "POST",
data: {
imglist: baseImg
},
success: function (res) {
if (res.data.code == 200) {
wx.showModal({
title: "提示",
content: "提交成功焚碌，棒棒噠畦攘！"
})
// 清空當前數(shù)據(jù)
that.data.imgList = [];
} else {
wx.showModal({
title: "提示",
content: "上傳失敗十电！"
})
}
}
})
}
刪除功能：被選中圖片移除當前圖片數(shù)組
// 刪除圖片（選中圖片移除）
delImg: function(e) {
const that = this;
const index = e.currentTarget.dataset.index; // 當前點擊圖片索引
that.data.imgList.splice(index, 1);
that.setData({
imgList: that.data.imgList
})
}
tips：
點擊提交按鈕后可以增加顯示loading提示框：wx.showLoading()知押，返回結(jié)果后隱藏loading提示框：wx.hideLoading()，此方法可以避免重復點擊鹃骂！
案例使用方法：
1.js代碼（直接復制文中代碼即可）
2.wxml
<view class="img-list">
<view class="txt">圖片 {{imgList.length}} / {{maxImg}}</view>
<view class="list">
<!-- 圖片展示列表 -->
<view class="li" wx:for="{{imgList}}" wx:key="index">
<image class="file" src="{{item}}"></image>
<!-- 刪除圖片 -->
<image class="close" src="/images/close.png" data-index="{{index}}" bindtap="delImg"></image>
</view>
<!-- 添加圖片 -->
<view class="li" bindtap="selectPictures">
<image class="file" src="/images/upload.jpg"></image>
</view>
</view>
</view>
<view class="btn" bindtap="conversionAddress">提 交</view>
3.wxss
.img-list{ width: 700rpx; margin: 0 auto;}
.img-list .txt{ width: 680rpx; padding: 40rpx 0 20rpx; margin: 0 auto; color: #b2b2b2;}
.img-list .list{ width: 700rpx; overflow: hidden;}
.img-list .list .li{ width: 160rpx; margin: 10rpx 0 0 10rpx; height: 160rpx; border: 1rpx solid #fff;
float: left; position: relative;}
.img-list .list .li:last-child{ border: 1rpx solid #f7f7f7;}
.img-list .list .li .file{ display: block; width: 160rpx; height: 160rpx;}
.img-list .list .li .close{ position: absolute; top: 0; right: 0; width: 44rpx; height: 44rpx; background: #fff;}
.btn{ background: #f60; width: 680rpx; border-radius: 10rpx; line-height: 88rpx;
color: #fff; text-align: center; margin: 50rpx auto 0;}
效果圖：
效果圖
