kd-aiot-frontend-qms/src/components/upload/imgUpload.vue

<template>
  <ele-image-upload
    v-model="images"
    :limit="limit"
    :drag="true"
    :multiple="true"
    :upload-handler="uploadHandler"
    :beforeUpload="beforeUpload"
    @upload="onUpload"
  >
  </ele-image-upload>
</template>

<script>
  import EleImageUpload from 'ele-admin/es/ele-image-upload';
  import { getImageUrl, getImagePath } from '@/utils/file';
  import { uploadFile } from '@/api/system/file/index';

  export default {
    components: { EleImageUpload },
    props: {
      // 所属模块
      module: {
        type: String,
        default: 'main'
      },
      // 限制数量
      limit: {
        type: Number,
        default: -1
      },
      value: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {};
    },
    computed: {
      images: {
        set (val) {
          this.$emit(
            'input',
            val.map((item) => ({
              ...item,
              url: getImagePath(item.url)
            }))
          );
        },
        get () {
          const arr =
            (this.value &&
              this.value.map((item) => ({
                ...item,
                url: getImageUrl(item.url)
              }))) ||
            [];

          return arr;
        }
      }
    },
    methods: {
      // beforeUpload(){},
      /* 上传事件 */
      uploadHandler (file) {
        const item = {
          file,
          uid: file.uid,
          name: file.name,
          progress: 0,
          status: null
        };
        if (!file.type.startsWith('image')) {
          this.$message.error('只能选择图片');
          return;
        }
        if (file.size / 1024 / 1024 > 2) {
          this.$message.error('大小不能超过 2MB');
          return;
        }
        this.$emit('input', [...this.value, item]);
        this.onUpload(item);
      },
      /* 上传 item */
      async onUpload (item) {
        // 模拟上传
        item.status = 'uploading';
        item.progress = 20;

        const res = await uploadFile({
          module: this.module,
          multiPartFile: item.file
        });
        if (res.data) {
          item.url = res.data.storePath;
          item.id = res.data.id;

          item.progress === 100;
          item.status = 'done';
        }
      }
    }
  };
</script>