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' : ''"
    >
      {{ tips }}
    </div>
  </div>
</template>

<script>
export default {
  name: "multi-uploader",
  props: {
    value: {
      type: Array
    },
    showTips: {
      type: Boolean,
      default: true
    },
    limit: {
      type: Number,
      default: 9
    },
    tips: {
      type: String,
      default: "最多添加9张作品图片"
    },
    fileSize: {
      type: Number,
      default: 5
    }
  },
  model: {
    prop: "value",
    event: "change"
  },
  components: {},
  data() {
    return {
      uploading: false,
      fileList: [],
      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 > this.fileSize) {
        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, this.fileList);
      if (!response.error && response.filename) {
        console.log("上传成功");
        const list = [];
        fileList.forEach(fileItem => {
          list.push({
            name: fileItem.name,
            url: fileItem.response ? fileItem.response.filename : fileItem.url,
            uid: fileItem.uid,
            status: "success"
          });
        });
        this.fileList = list;
      } else {
        this.$refs.multiUploader.abort(file);
        const list = [];
        fileList.forEach(tmpFile => {
          if (file.uid !== tmpFile.uid) {
            list.push({
              name: tmpFile.name,
              url: tmpFile.response ? tmpFile.response.filename : tmpFile.url,
              uid: tmpFile.uid,
              status: "success"
            });
          }
        });
        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>