fix 作品图片空的问题“

components/multi-uploader.vue

@@ -4,7 +4,10 @@
       action="/upload_image"
       list-type="picture-card"
       :limit="9"
+      ref="multiUploader"
+      with-credentials
       :file-list="fileList"
+      :before-upload="beforeUpload"
       :on-preview="handlePictureCardPreview"
       :on-remove="handleRemove"
       :on-success="handleSuccess"
@@ -12,7 +15,7 @@
       <i class="el-icon-plus"></i>
     </el-upload>
     <el-dialog :visible.sync="dialogVisible">
-      <img width="100%" :src="dialogImageUrl" alt />
+      <img width="100%" :src="dialogImageUrl" alt/>
     </el-dialog>
     <div slot="tip" class="el-upload__tip">最多添加9张作品图片</div>
   </div>
@@ -22,7 +25,9 @@
 export default {
   name: "multi-uploader",
   props: {
-    value: Array
+    value: {
+      type: Array
+    }
   },
   model: {
     prop: "value",
@@ -32,19 +37,44 @@ export default {
   data() {
     return {
       uploading: false,
-      fileList: [],
+      fileList: this.value,
       dialogImageUrl: "",
       dialogVisible: false
     };
   },
+  watch: {
+    value: {//深度监听，可监听到对象、数组的变化
+      handler(val, oldVal) {
+        console.log('watch1:', val)
+        this.fileList = val
+      },
+      deep: true //true 深度监听
+    },
+    fileList: {//深度监听，可监听到对象、数组的变化
+      handler(val, oldVal) {
+        console.log('watch2:', val)
+        this.$emit("change", val);
+      },
+      deep: true //true 深度监听
+    }
+  },
   computed: {},
   mounted() {
     this.fileList = this.value;
   },
   methods: {
+    beforeUpload(file) {
+      console.log("beforeUpload", file);
+      console.log("before", this.$refs.multiUploader);
+      let fileType = file.type ? file.type : file.raw.type;
+      if (fileType !== "image/png" && fileType !== "image/jpg" && fileType !== "image/jpeg" && fileType !== "image/gif") {
+        this.$message.error("文件类型不正确");
+        return false;
+      }
+      return true;
+    },
     handleRemove(file, fileList) {
       console.log(file, fileList);
-      this.handleChange(fileList);
     },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
@@ -52,19 +82,33 @@ export default {
     },
     handleSuccess(response, file, fileList) {
       console.log(response, file, fileList);
-      this.handleChange(fileList);
-    },
-    handleChange(fileList) {
-      const list = [];
-      fileList.map(file => {
-        list.push({
-          name: file.name,
-          url: file.response ? file.response.filename : file.url
+      if (!response.error && response.filename) {
+        console.log("上传成功");
+        const list = [];
+        fileList.map(file => {
+          if (file.response.filename && !file.response.error) {
+            list.push({
+              name: file.name,
+              url: file.response ? file.response.filename : file.url
+            });
+          }
         });
-      });
-      console.log(list, fileList);
-      this.$emit("change", list);
-    }
+        this.fileList = list;
+      } else {
+        this.$refs.multiUploader.abort(file);
+        const list = [];
+        fileList.map(tmpFile => {
+          if (file.uid !== tmpFile.uid) {
+            list.push({
+              name: file.name,
+              url: file.response ? file.response.filename : file.url
+            });
+          }
+        });
+        this.fileList = list;
+        console.log("上传失败 abort");
+      }
+    },
   }
 };
 </script>