fix work upload

components/multi-uploader.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="multi-uploader">
     <el-upload
-      action="/upload_image"
+      action="http://local.proginn.com/upload_image"
       list-type="picture-card"
       :limit="9"
-      ref="multiUploade"
-      accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.GIF"
+      ref="multiUploader"
+      with-credentials
       :file-list="fileList"
       :before-upload="beforeUpload"
       :on-preview="handlePictureCardPreview"
@@ -22,57 +22,68 @@
 </template>
 
 <script>
-  export default {
-    name: "multi-uploader",
-    props: {
-      value: Array
+export default {
+  name: "multi-uploader",
+  props: {
+    value: {
+      type: Array
+    }
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  components: {},
+  data() {
+    return {
+      uploading: false,
+      fileList: this.value,
+      dialogImageUrl: "",
+      dialogVisible: false
+    };
+  },
+  watch: {
+    value: {//深度监听，可监听到对象、数组的变化
+      handler(val, oldVal) {
+        console.log('watch1:', val)
+        this.fileList = val
+      },
+      deep: true //true 深度监听
     },
-    model: {
-      prop: "value",
-      event: "change"
+    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;
     },
-    components: {},
-    data() {
-      return {
-        uploading: false,
-        fileList: [],
-        dialogImageUrl: "",
-        dialogVisible: false
-      };
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
     },
-    computed: {},
-    mounted() {
-      this.fileList = this.value;
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
     },
-    methods: {
-      beforeUpload(file) {
-        console.log("beforeUpload", file);
-        console.log("before", this.$refs.multiUploade);
-        if (file.type !== "image/png" || file.type !== "image/jpg" || file.type !== "image/jpeg" || file.type !== "image/gif") {
-          this.$message.error("文件类型不正确");
-          this.$refs.multiUploade.abort(file);
-        }
-      },
-      handleRemove(file, fileList) {
-        console.log(file, fileList);
-        this.handleChange(fileList);
-      },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
-      },
-      handleSuccess(response, file, fileList) {
-        console.log(response, file, fileList);
-        if (!response.error && response.filename) {
-          console.log("上传成功");
-          this.handleChange(fileList)
-        } else {
-          this.$refs.multiUploade.abort(file);
-          console.log("上传失败 abort");
-        }
-      },
-
-      handleChange(fileList) {
+    handleSuccess(response, file, fileList) {
+      console.log(response, file, fileList);
+      if (!response.error && response.filename) {
+        console.log("上传成功");
         const list = [];
         fileList.map(file => {
           if (file.response.filename && !file.response.error) {
@@ -82,18 +93,29 @@
             });
           }
         });
-        this.$emit("change", list);
-        console.log("list:", list);
-        console.log("fileList", fileList);
-        console.log("this.fileList", this.fileList);
+        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>
 
 <style lang="scss">
-  .multi-uploader {
-    position: relative;
-    background: #fff;
-  }
+.multi-uploader {
+  position: relative;
+  background: #fff;
+}
 </style>