kd-aiot-frontend/src/components/upload/fileUpload.vue

<template>
  <el-upload
    class="upload-demo"
    action="#"
    :http-request="handlRequest"
    :before-remove="beforeRemove"
    :on-remove="handleRemove"
    multiple
    :before-upload="beforeUpload"
    :file-list="fileList"
  >
    <slot>
      <el-button size="small" type="primary">点击上传</el-button>
    </slot>
  </el-upload>
</template>

<script>
  import { uploadFile, removeFile } from '@/api/system/file/index.js';
  import { getImageUrl, getImagePath } from '@/utils/file';
  export default {
    props: {
      value: {
        type: Array,
        default: () => []
      },
      // 所属模块
      module: {
        type: String,
        required: true
      },
      // 限制数量
      limit: {
        type: Number,
        default: -1
      },
      // 限制大小 mb
      size: {
        type: Number,
        default: 10
      }
    },
    computed: {
      fileList: {
        set (val) {
          console.log(val);
          this.$emit(
            'input',
            val.map((item) => ({
              ...item,
              url: getImagePath(item.url)
            }))
          );
        },
        get () {
          const arr = this.value.map((item) => ({
            ...item,
            url: getImageUrl(item.url)
          }));
          return arr;
        }
      }
    },

    methods: {
      beforeRemove (file) {
        if (file.id) {
          return removeFile({
            fileId: file.id
          }).then(() => {
            return true;
          });
        } else {
          return true;
        }
      },
      handleRemove (file, fileList) {
        this.fileList = fileList;
      },
      beforeUpload (file) {
        if (file.size / 1024 / 1024 > this.size) {
          this.$message.error(`大小不能超过 ${this.size}MB`);
          return false;
        }

        if (this.limit > 0 && this.fileList.length === this.limit) {
          this.$message.error(`最多上传 ${this.limit}个文件`);
          return false;
        }
        return uploadFile({
          module: this.module,
          multiPartFile: file
        }).then((res) => {
          if (res.data) {
            this.$emit('input', [
              ...this.value,
              { ...file, url: res.data.storePath, ...res.data }
            ]);
          }
          return res.data;
        });
      },
      handlRequest () {
        return Promise.resolve();
      }
    }
  };
</script>