上篇文章解決了多圖上傳的預(yù)覽和刪除功能，然后按照學(xué)習(xí)要求需要做一個替換圖片的功能，發(fā)現(xiàn)網(wǎng)上基本查不到這個字眼，因為替換不就是把圖片刪除再上傳一張嘛，但其中其實有一些微小的區(qū)別，替換是把指定位置的圖片替換，而刪除后再添加就是在最后新增圖片，順序不一樣。處理思路其實很簡單，在觸發(fā)點擊時間事件的回調(diào)信息里可以取到當(dāng)前選擇的圖片的index，根據(jù)這個index去做操作，新增的圖片就不能像多張上傳那樣把圖片URL直接push進數(shù)組，應(yīng)該直接賦值，Array[index]=圖片url就行了。
下圖為替換第二張圖片的效果
image.png
image.png
wxml和js文件
<!--替換的WXML-->
<image src="../../img/replaceImg.png" class="replaceImg" mode="aspectFill" bindtap="replaceImg"
data-index='{{idx}}' data-item='{{item}}'/>
/***替換圖片 */
replaceImg: function (e) {
console.log("替換返回的e", e)
const index = e.currentTarget.dataset.index; //index是圖片的索引，從0開始
const {
upload,
chooseImgs
} = this.data;
console.log("替換前的上傳upload數(shù)組", upload)
console.log("替換前的本地chooseImgs數(shù)組", chooseImgs)
this.uploadImgOne(index)//在index位置上傳單張圖片
},
把index值傳入單張圖片上傳的函數(shù)里
/***單圖上傳 */
async uploadImgOne(index) {
const that = this;
const {
upload,
chooseImgs
} = this.data;
wx.chooseImage({
count: 1, // 默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success: async function (res) {
console.log(res)
const newChooseImgs = res.tempFilePaths; //拿到圖片本地URL（URL,長度）
const imgInfo = res.tempFiles; //拿到圖片的信息（URL，大小，長度）
// 判斷選擇的圖片是否符合要求
for (let i = 0; i < imgInfo.length; i++) {
console.log("尺寸", imgInfo[i].size);
// 判斷圖片尺寸，大于10M不行
if (imgInfo[i].size / 1024 / 1024 >= 10) {
wx.showModal({
title: '提示', // 標題
content: "圖片超過10MB啦~", // 內(nèi)容
showCancel: false, // 是否顯示取消按鈕
confirmText: '確定', // 確認按鈕的文字
});
return
}
// 判斷圖片格式
const imgSplit = imgInfo[i].path.split(".");
const imgSLen = imgSplit.length;
console.log("格式", imgSplit, imgSLen, imgSLen - 1);
//分割圖片URL后有四段，但是下標是0，1，2，3，所以需要總數(shù)減1才是后綴的下標
if (["jpg", "jpeg", "png"].includes(imgSplit[imgSLen - 1])) {
console.log("格式正確");
} else {
console.log("格式錯誤");
utils.showModalInfo({
content: "請選擇正確的圖片格式上傳",
});
return
}
}
console.log("選擇圖片時", res, chooseImgs, newChooseImgs);
//此時chooseImgs的池子里是空，需要把選擇到newChooseImgs里的圖片傳入本地chooseImgs池子里
// newChooseImgs.forEach(item => {
// chooseImgs.push(item);
// });
chooseImgs[index] = newChooseImgs;
console.log("選擇圖片后", chooseImgs, newChooseImgs); //此時池子里有圖片
console.log("顯示添加圖片", chooseImgs.length);
if (chooseImgs.length > 0) {
//圖如果滿了1張，不顯示加圖
if (chooseImgs.length >= 9) {
that.setData({
//隱藏加號
hideAdd: true
})
} else {
that.setData({
hideAdd: false
})
}
// 顯示預(yù)覽圖
that.setData({
chooseImgs
});
// 網(wǎng)絡(luò)請求 上傳圖片await
// for (let item of newChooseImgs) {
console.log("單張圖片", newChooseImgs)
console.log("本地數(shù)組", chooseImgs)
console.log("圖片下標", index)
let resImage = await uploadFile(newChooseImgs[0])
console.log("替換后上傳返回的內(nèi)容resImage:", resImage)
const upload = that.data.upload; //把每次選擇的圖放到數(shù)組的選擇替換位置
const resStatus = resImage.data.status
const resName = resImage.data.name
console.log("后綴", resName)
if (resStatus == 1) {
const imgURL = {
imgURL: 'xxxxx' + resName
}
upload[index] = imgURL;
that.setData({
"upload": upload,
//"chooseImgs": chooseImgs
})
console.log("替換后的上傳數(shù)組", upload)
} else {
that.getToken()
let resImage = await uploadFile(newChooseImgs[0])
console.log("替換后上傳返回的內(nèi)容resImage:", resImage)
const upload = that.data.upload; //把每次選擇的圖放到數(shù)組的選擇替換位置
const resName = resImage.data.name
const imgURL = {
imgURL: 'xxxxxxx' + resName
}
upload[index] = imgURL;
that.setData({
"upload": upload,
//"chooseImgs": chooseImgs
})
console.log("替換后的上傳數(shù)組", upload)
}
}
}
})
},
總體和多圖上傳差不多，控制只能選擇一張圖片，然后主要就是下面兩行變化,直接賦值不用Push
chooseImgs[index] = newChooseImgs;
upload[index] = imgURL
