FE_occupationlab_server/src/components/upload/index.vue

<template>
  <el-upload :disabled="uploading"
             :before-upload="beforeUpload"
             :on-remove="onRemove"
             :on-error="uploadError"
             :limit="limit"
             action=""
             :on-exceed="handleExceed"
             :show-file-list="showFiles"
             :file-list="fileList"
             :http-request="handleRequest"
             name="file">
    <slot name="trigger">
      <el-button size="small"
                 :loading="uploading">{{ uploading ? '正在上传' : '上传文件' }}</el-button>
    </slot>
    <div slot="tip"
         class="el-upload__tip">
      <el-progress v-if="uploading"
                   class="upload-progress"
                   :stroke-width="3"
                   :percentage="uploadProgress"></el-progress>
      <slot name="tip">
        <p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p>
      </slot>
    </div>
  </el-upload>
</template>

<script>
import OSS from 'ali-oss'
import OssConfig from './config.js'
import Util from '@/libs/util'
export default {
  props: {
    // 最大允许上传个数
    limit: {
      type: Number,
      default: 1
    },
    // 单个文件最大大小(单位: Mb)
    maxSize: {
      type: Number,
      default: 10
    },
    // 是否显示已上传文件列表
    showFileList: {
      type: Boolean,
      default: true
    },
    // 已上传文件列表
    fileList: {
      type: Array,
      default: () => []
    },
    // 是否要更新fileList（如果要使用自己的fileList，则这个值传false，一般情况不用给这个值）
    changeFileList: {
      type: Boolean,
      default: true
    },
    // 已上传文件列表
    onRemove: {
      type: Function,
      default: new Function()
    },
  },
  data () {
    return {
      client: null,
      uploading: false,
      uploadProgress: 0,
      showFiles: this.showFileList
    };
  },
  mounted () {
    this.initOss()
  },
  methods: {
    // 初始化oss
    initOss () {
      this.client = new OSS(OssConfig.config)
    },
    // 附件上传前
    beforeUpload (file) {
      const oversize = file.size / 1024 / 1024 < this.maxSize
      if (!oversize) Util.warningMsg(`请上传小于${this.maxSize}MB的附件！`)
      if (oversize) {
        this.$emit('beforeUpload', file)
        return true
      } else {
        return false
      }
    },
    // 自定义进度条
    handleProgress (progress) {
      this.uploadProgress = Number((progress * 100).toFixed(2))
    },
    // 自定义上传
    async handleRequest ({ file }) {
      try {
        this.uploadProgress = 0
        this.uploading = true
        this.showFiles = false
        // 上传到阿里云oss
        const { name } = await this.client.multipartUpload(Date.now() + '.' + Util.getFileExt(file.name), file, {
          progress: this.handleProgress
        });

        this.uploading = false
        const url = OssConfig.preUrl + name
        this.changeFileList && this.$emit('update:fileList', [
          ...this.fileList,
          {
            name: name,
            url
          }
        ])

        this.showFiles = true
        this.$emit('onSuccess', {
          format: Util.getFileExt(file.name),
          name: file.name,
          url,
          size: file.size,
        })
      } catch (error) { }
    },
    uploadError (err, file, fileList) {
      this.$message({
        message: "上传出错，请重试！",
        type: "error",
        center: true
      })
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleExceed (files, fileList) {
      Util.warningMsg(`当前限制选择 ${this.limit} 个文件，如需更换，请删除上一个文件再重新选择！`);
    },
  }
};
</script>
<style lang="scss" scoped>
/deep/.upload-progress {
    max-width: 300px;
    margin: 10px 0;
    white-space: nowrap;
}
</style>