vue2 上传附件

<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      drag
      multiple
      action=""
      :auto-upload="true"
      :before-upload="beforeUpload"
      :limit="10"
      :before-remove="beforeRemove"
      :on-preview="handlePreview"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :httpRequest="uploadFile"
    >
      <div v-if="isEdit && !isView">
        <div class="container">
          <i class="el-icon-upload2" />
          <div class="el-upload__text">将文件拖到此处，或<br /><em>点击上传</em></div>
        </div>
        <p class="el-upload__tip">1.最多可上传10个附件，附件大小不得超过8M;</p>
      </div>
      <div v-else>
        <p class="el-upload__tip" style="color: red; font-size: 15px">审批中禁止上传或者删除附件</p>
      </div>
    </el-upload>
  </div>
</template>
<script>
export default {
  data() {
    return { fileList: [] }
  },
  methods: {
    // 下载文件
    handlePreview(file) {
      console.log(file)
      if (file.id) 下载接口(file)
    },
    // 选取文件超过数量提示
    handleExceed() {
      this.$message({ type: 'error', message: '最多支持5个附件上传' })
    },
    // 上传文件
    beforeUpload(file) {
      if (!this.handleChangeFile(file, this.fileList)) {
        return false
      }
      const isLt8M = file.size / 1024 / 1024 < 8
      if (!isLt8M) {
        this.$message({
          message: '上传文件大小不能超过8MB',
          type: 'error',
        })
        return false
      }
      return isLt8M
    },
    handleChangeFile(file, fileList) {
      const existFile = fileList.find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('当前文件已经存在!')
        return false
      }
      return true
    },
    // 删除上传文件
    beforeRemove(file, fileList) {
      if (file.id) {
        return this.$confirm('将要删除该附件，是否继续', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const { id, categroy } = { ...file }
          删除接口({ id, categroy }).then(data => {
            this.$message({
              message: '删除成功',
              type: 'success',
            })
            this.fileList = fileList
          })
        })
      }
    },
    uploadFile(val) {
      const formData = new FormData()
      formData.append('files', val.file)
      formData.append('categoryId', this.$route.query.id)
      formData.append('category', 'xxxx')
      上传接口(formData).then(res => {
        res.data.forEach(item =>
          this.fileList.push({
            name: item.xxx,
            url: item.xxx,
            id: item.xxx,
          })
        )
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.upload-demo {
  ::v-deep .el-upload-dragger {
    width: 619px;
    height: 84px;
    line-height: 17px;
    display: flex;
    border: 1px solid #d0d2d7;
    justify-content: space-around;
    align-items: center;

    .container {
      display: flex;
      align-items: center;
    }

    .el-upload__text {
      font-size: 12px;
      text-align: start;
    }

    i {
      font-size: 20px;
      margin: 0 5px 0;
    }
  }
}
</style>