proginn-frontend/components/multi-uploader.vue

<template>
  <div class="multi-uploader">
    <el-upload
      action="/upload_image"
      list-type="picture-card"
      :limit="9"
      accept=".jpg,.jpeg,.png,.git,.JPG,.PNG,.JPEG,.GIF"
      ref="multiUploader"
      with-credentials
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt/>
    </el-dialog>
    <div slot="tip" class="el-upload__tip">最多添加9张作品图片</div>
  </div>
</template>

<script>
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 深度监听
    },
    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 ? file.raw.type : "");
      if (fileType !== "image/png" && fileType !== "image/jpg" && fileType !== "image/jpeg" && fileType !== "image/gif") {
        this.$message.error("请上传png,jpg格式的图片");
        return false;
      }
      if (file.size / 1024 / 1024 > 2) {
        this.$message.error("图片大小超过2M");
        return false;
      }
      return true;
    },
    handleRemove(file, fileList) {
      console.log(file, 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("上传成功");
        const list = [];
        fileList.map(fileItem => {
          list.push({
            name: fileItem.name,
            url: fileItem.response ? fileItem.response.filename : fileItem.url
          });
        });
        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;
}
</style>