proginn-frontend/components/multi-uploader.vue

<template>
  <div class="multi-uploader" :class="fileList && fileList.length >= limit ? 'multi-uploader-limit' : ''">
    <el-upload
      action="/upload_image"
      list-type="picture-card"
      :limit="limit"
      accept=".jpg,.jpeg,.png,.JPG,.PNG,.JPEG"
      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" v-if="showTips" class="el-upload__tip" :class="fileList.length ? 'el-upload__tip-active' : ''">最多添加9张作品图片</div>
  </div>
</template>

<script>
export default {
  name: "multi-uploader",
  props: {
    value: {
      type: Array
    },
    showTips: {
      type: Boolean,
      default: true
    },
    limit: {
      type: Number,
      default: 9
    }
  },
  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,jp(e)g,gif格式的图片");
        return false;
      }
      if (file.size / 1024 / 1024 > 5) {
        this.$message.error("图片大小不可超过5M");
        return false;
      }
      return true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = 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;
}
.multi-uploader-limit {
  .el-upload--picture-card {
    display: none;
  }
}
.el-upload__tip {
  line-height: 20px;
  // margin-top: 10px;
  font-size: 14px;
  color: #999999;
}
.el-upload__tip-active {
  margin-top: -1px;
}
</style>