<div v-for="(info, index) in zsjzqwhxqList.helicopterTourInfoList" :key="info.id" >編輯上傳圖片// oss返回線上地址http鏈接格式：<el-form-itemlabel="巡視結果照片":label-width="formLabelWidth"><el-upload:action="'http://×××××uploadFile'"list-type="picture-card":limit="10":on-exceed="limitError":on-success="(response, file, fileList) =>imgSuccess(response,file, fileList,index ) ":on-error="imgError":on-remove="(file, fileList) =>handleRemove(file,fileList, index) ":file-list="getFileList(info.url)":on-preview="handlePreview"class="horizontal-upload" ></el-upload></el-form-item>//文件流格式:<el-col :span="24"><el-form-itemlabel="巡視結果照片":label-width="formLabelWidth"><el-upload:action="'×××接口地址/uploadFile' "list-type="picture-card":limit="10":on-exceed="limitError":on-success="(response, file, fileList) =>imgSuccess(response,file,fileList,index) ":on-error="imgError":on-remove="(file, fileList) =>handleRemove(file,fileList,index ) ":on-preview="handlePreview":file-list="getFileList(index)"class="horizontal-upload" ></el-upload></el-form-item></el-col>
然后就是方法了有2種
//http在線返回:返回的是http形式直接瀏覽器可以打開// async xiaziaT() {// for (const tourInfo of this.zsjzqwhxqListck// .helicopterTourInfoList) {// if (tourInfo.url) {// const urls = tourInfo.url.split(",");// for (const url of urls) {// try {// const data = await getFileUrl({ url });// console.log(data);// // 更新 tourInfo.imageUrl 以回顯圖片// tourInfo.imageUrl = data.data.msg;// } catch (error) {// console.error(`無法下載文件 ${url}`, error);// }// }// }// }// },//文件流：后端接口返回文件流格式async xiaziaTwh() {this.teamPhotoUrls = [];const tempTeamPhotoUrls = [];for (const [tourIndex,tourInfo,] of this.zsjzqwhxqList.helicopterTourInfoList.entries()) {if (tourInfo.url) {console.log(tourInfo.url, "tourInfo.url");const urls = tourInfo.url.split(",");tempTeamPhotoUrls[tourIndex] = [];for (const url of urls) {try {const data = await downloadFile({ url });let blob = new Blob([data], {type: "image/jpg",});console.log(data);const imageUrl = data.data.msg;tempTeamPhotoUrls[tourIndex].push({name: url.split(",").pop(),url: imageUrl,});console.log(this.fileList, "234");} catch (error) {console.error(`無法從下載文件 ${url}`, error);}}}}this.teamPhotoUrls = tempTeamPhotoUrls;},
公共方法：
data() {return {fileList: [],fileListCache: {},zsjzqwhxqList: [],zsjzqwhxqListck: [],},
http在線方法：// getUrls(urlString) {// if (typeof urlString !== "string" || !urlString) {// return [];// }// return urlString.split(",");// },// getFileList(urlString) {// if (this.fileListCache[urlString]) {// return this.fileListCache[urlString];// }// const urls = this.getUrls(urlString);// const fileList = urls.map((url, index) => ({// name: `圖片 ${index + 1}`,// url: url,// }));// this.fileListCache[urlString] = fileList;// return fileList;// },
//防止上傳和回顯圖片了重復加載，因為是根據url:'里面有幾個url,隔開會請求幾遍文件流地址避免重復渲染'computed: {computedFileList() {return this.teamPhotoUrls.map((photos, index) => {return photos.map((photo) => ({name: photo.name,url: photo.url,status: "done", // 設置文件狀態為已完成}));});},
//上傳功能
limitError(files, fileList) {this.$message.error("最多只能上傳10張圖片");},imgSuccess(response, file, fileList, index) {console.log(file, fileList);// 獲取當前的 URL 列表let currentUrls =this.zsjzqwhxqList.helicopterTourInfoList[index].url || "";// 將新上傳的文件 URL 添加到當前的 URL 列表中const newUrl = file.response.msg;if (currentUrls) {currentUrls += "," + newUrl;} else {currentUrls = newUrl;}// 更新 URL 列表和文件列表this.zsjzqwhxqList.helicopterTourInfoList[index].url = currentUrls;this.zsjzqwhxqList.helicopterTourInfoList[index].fileList = fileList;this.$message.success("文件上傳成功");// this.$nextTick(() => {// this.xiaziaTwh();// });},imgError(err, file, fileList) {this.$message.error("文件上傳失敗");},limitError(files, fileList) {this.$message.error("上傳文件數量超出限制");},// 刪除圖片handleRemove(file, fileList, index) {console.log("Removing file:", file);console.log("Removing fileList:", fileList);console.log("Removing index:", index);const url ="××接口地址:10007/zxjcgjgl/helicopterTourManagement/deleteImage";let imageUrl;if (file.raw) {imageUrl = file.response.msg;console.log("6666");} else {imageUrl = file.name;console.log("7777");} fetch(url, {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify({ url: imageUrl }),}).then((response) => response.json()).then((data) => {console.log("響應數據:", data);let currentUrls = this.zsjzqwhxqList.helicopterTourInfoList[index].url;console.log("刪除前的當前URL:", currentUrls);if (data.code === 200) {if (currentUrls) {let urlArray = currentUrls.split(",");let newUrlArray = urlArray.filter((url) => url !== imageUrl);this.zsjzqwhxqList.helicopterTourInfoList[index ].url = newUrlArray.join(",");}this.zsjzqwhxqList.helicopterTourInfoList[index].fileList = fileList;this.$message.success("圖片刪除成功");} else {console.error("錯誤:", data);this.$message.error("圖片刪除失敗");}}).catch((error) => {console.error("錯誤", error);this.$message.error("圖片刪除失敗");});},
//預覽圖片：handlePreview(file) {this.$alert(`<img src="${file.url}" style="width: 100%;">`,"圖片預覽",{dangerouslyUseHTMLString: true,confirmButtonText: "關閉",});},
)
