update 图片上传

jsowell-ui/src/views/pile/station/components/SiteInfo.vue

@@ -8,6 +8,7 @@
       :on-preview="handlePictureCardPreview"
       :on-remove="handleRemove"
       :on-success="handleSuccess"
+      :file-list="fileList"
     >
       <i class="el-icon-plus"></i>
     </el-upload>
@@ -290,7 +291,7 @@ export default {
           { required: true, message: "请输入营业时间", trigger: "blur" },
         ],
       },
-      pictureList: [],
+      fileList: [], // 用于图片回显
     };
   },
   created() {
@@ -301,10 +302,14 @@ export default {
       this.imageUrl = URL.createObjectURL(file.raw);
       console.log("图片上传成功 url：", this.imageUrl);
       console.log("图片上传成功 res：", res);
-      this.pictureList.push(res.url);
+      this.fileList.push({url: res.url});
     },
     handleRemove(file, fileList) {
-      console.log(file, fileList);
+      console.log("移除图片", file, fileList);
+      // 从pics数组中，找到图片对应的索引值
+      const i = this.fileList.findIndex(x => x.uid === file.uid);
+      // 调用splice方法，移除图片信息
+      this.fileList.splice(i, 1);
     },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
@@ -319,7 +324,10 @@ export default {
       const res = await getStationInfo(this.stationId);
       console.log(res);
       this.station = res.data;
-      this.pictureList = this.station.pictures.split(',');
+      var pictures = res.data.pictures.split(',');
+      for (let i = 0; i < pictures.length; i++) {
+        this.fileList.push({"url": pictures[i]});
+      }
       console.log("queryStationInfo表格数据", this.station);
     },
     // 提交按钮
@@ -373,6 +381,13 @@ export default {
     areaCodeList() {
       return this.station.areaCode.split(",");
     },
+    pictureList() {
+      var pictureList = [];
+      for (let i = 0; i < this.fileList.length; i++) {
+        pictureList.push(this.fileList[i].url);
+      }
+      return pictureList;
+    }
   },
 };
 </script>