二手车交易，缓存问题,删除照片的bug

src/views/secondHandCar/carSource.vue

@@ -225,7 +225,6 @@ export default {
       this.vehicleAnglePhotoList=[{url:res.data?.vehicleAnglePhoto}]
     }
     let carSourceFormInfo=localStorage.getItem("carSourceFormInfo") ? JSON.parse(localStorage.getItem("carSourceFormInfo")) : ''
-    // console.log("carSourceFormInfo",carSourceFormInfo)
     if(!carSourceFormInfo){
       return
     }
@@ -242,22 +241,29 @@ export default {
    if(this.form.vehicleAnglePhoto){
      this.vehicleAnglePhotoList=[{url:this.form.vehicleAnglePhoto}]
    }
+    console.log("carSourceFormInfo",carSourceFormInfo)
    if(carSourceFormInfo.otherImgSrc0){
+     this.otherImgSrc.push(carSourceFormInfo.otherImgSrc0)
      this.otherImgSrcList.push({url:carSourceFormInfo.otherImgSrc0})
    }
     if(carSourceFormInfo.otherImgSrc1){
+      this.otherImgSrc.push(carSourceFormInfo.otherImgSrc1)
       this.otherImgSrcList.push({url:carSourceFormInfo.otherImgSrc1})
     }
     if(carSourceFormInfo.otherImgSrc2){
+      this.otherImgSrc.push(carSourceFormInfo.otherImgSrc2)
       this.otherImgSrcList.push({url:carSourceFormInfo.otherImgSrc2})
     }
     if(carSourceFormInfo.otherImgSrc3){
+      this.otherImgSrc.push(carSourceFormInfo.otherImgSrc3)
       this.otherImgSrcList.push({url:carSourceFormInfo.otherImgSrc3})
     }
     if(carSourceFormInfo.otherImgSrc4){
+      this.otherImgSrc.push(carSourceFormInfo.otherImgSrc4)
       this.otherImgSrcList.push({url:carSourceFormInfo.otherImgSrc4})
     }
     if(carSourceFormInfo.otherImgSrc5){
+      this.otherImgSrc.push(carSourceFormInfo.otherImgSrc5)
       this.otherImgSrcList.push({url:carSourceFormInfo.otherImgSrc5})
     }
     console.log("--",this.vehicleLicensePhotoList,this.vehicleAnglePhotoList,this.otherImgSrcList)
@@ -277,12 +283,12 @@ export default {
     viewPrivacy(){
       let data={
         form:this.form,radio:this.radio,areaName:this.areaName,
-        otherImgSrc0:this.otherImgSrcList?.length==1 ? this.otherImgSrcList[0] : '',
+        otherImgSrc0: this.otherImgSrc[0],
-        otherImgSrc1:this.otherImgSrcList?.length==2 ? this.otherImgSrcList[1] : '',
+        otherImgSrc1: this.otherImgSrc[1],
-        otherImgSrc2:this.otherImgSrcList?.length==3 ? this.otherImgSrcList[2] : '',
+        otherImgSrc2:this.otherImgSrc[2],
-        otherImgSrc3:this.otherImgSrcList?.length==4 ? this.otherImgSrcList[3] : '',
+        otherImgSrc3:this.otherImgSrc[3],
-        otherImgSrc4:this.otherImgSrcList?.length==5 ? this.otherImgSrcList[4] : '',
+        otherImgSrc4:this.otherImgSrc[4],
-        otherImgSrc5:this.otherImgSrcList?.length==6 ? this.otherImgSrcList[5] : '',
+        otherImgSrc5:this.otherImgSrc[5],
       }
       localStorage.setItem("carSourceFormInfo",JSON.stringify(data))
       this.$router.push({ name: "privacyComponent"})

src/views/secondHandCar/components/upload-common.vue

@@ -40,24 +40,24 @@ export default {
   },
   data() {
     return {
-      filesList: '',
+      filesList: [],
     }
   },
-  mounted() {
-    this.filesList = this.files || []; // 确保 filesList 是数组
-  },
   watch: {
     files: {
-      immediate: true, // 立即执行一次
+      immediate: true,
+      deep:true,
       handler(newVal) {
-        this.filesList = newVal || []; // 同步更新 filesList
+        this.$nextTick(() => {
+          this.filesList = newVal || [];
+        })
       },
     },
     filesList: {
       handler(newVal) {
         this.$emit("update:files", newVal);
       },
-      deep: true, // 深度监听
+      deep: true,
     },
   },
   computed: {
@@ -78,29 +78,25 @@ export default {
       const images = this.filesList.map(file => file.url || file.content); // 所有图片的 URL
       ImagePreview({
         images,
-        startPosition: detail.index, // 从当前点击的图片开始预览
+        startPosition: detail.index,
         closeable: true,
         onClose: () => {}
       });
     },
     async deleteHandle(file, detail) {
-      // console.log("file, detail", file, detail);
+      this.filesList = this.filesList.filter((item, i) => i !== detail.index);
-      this.filesList = this.filesList.filter((item) => item !== file);
-      // console.log("this.filesList =", this.filesList)
-      // 根据 text 的不同，通知父组件删除对应的数据
       if (this.text === "行驶证照片") {
-        this.$emit("delete1"); // 通知父组件删除行驶证数据
+        this.$emit("delete1");
       } else if (this.text === "车辆45度照") {
-        this.$emit("delete2"); // 通知父组件删除车辆45度照数据
+        this.$emit("delete2");
       } else {
-        // console.log("delete3", file)
+        console.log("file, detail", file, detail)
-        this.$emit("delete3", file, detail.index); // 通知父组件删除其他照片数据
+        this.$emit("delete3", file, detail.index);
       }
       return true;
     },
     async handleFileRead(file) {
       const formData = new FormData();
-      // console.log("file.file",file.file)
       if(!file.file){
         this.$toast('获取文件失败，请重新上传')
       }