element 附件上传/文件上传组件

实例：

组件代码：

<template>
  <div>
   <el-upload
      class="upload-demo"
      action=""
      :auto-upload="false"
      :on-change="submitFile"
      :before-remove="handleRemove"
      :limit="limit"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :show-file-list="showFile"
    >
      <el-button
        icon="el-icon-upload2"
        style="position: absolute; left: 120px; top: 0px;"
      >上传文件</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    limit: {
      type: Number,
      default: 1
    },
    fileList: {
      type: Array,
      default: function () {
        return []
      }
    },
    showFile: {
      type: Boolean,
      default: true
    },
    sizeLimit: {
      // 最大单文件大小
      type: Number,
      default: 50
    }
  },
  data () {
    return {
      file: ''
    }
  },
  created () {},
  mounted () {},
  methods: {
    beforeUpload (file) {
      console.log(file, 'file.name')
      return new Promise((resolve, reject) => {
        if (!/\.(jpg|jpeg|png|JPG|PNG|pdf|doc|docx)$/.test(file.name)) {
          // eslint-disable-next-line prefer-promise-reject-errors
          this.$message.warning('附件只支持JPG/JPEG/PNG/PDF/DOC/DOCX格式!')
          this.fileList = []
          return false
        }
        const filePost = file.name.substring(
          file.name.lastIndexOf('.') + 1
        )
        console.log(filePost, 'filePost')

        if (filePost === 'doc' || filePost === 'docx') {
          if (file.size > 10 * 1024 * 1024) {
            console.log(file.size, 'file.size')
            // eslint-disable-next-line prefer-promise-reject-errors
            this.$message.warning('上传word大小不能超过10M!')
            this.fileList = []
            return false
          }
        } else {
          if (file.size > this.sizeLimit * 1024 * 1024) {
            console.log(file.size, 'file.size')
            // eslint-disable-next-line prefer-promise-reject-errors
            this.$message.warning(`上传附件大小不能超过${this.sizeLimit}M!`)
            this.fileList = []
            return false
          }
        }
        // if (file.size > this.sizeLimit * 1024 * 1024) {
        //   console.log(file.size, 'file.size')
        //   // eslint-disable-next-line prefer-promise-reject-errors
        //   this.$message.warning(`上传图片大小不能超过${this.sizeLimit}M!`)
        //   this.fileList = []
        //   return false
        // }
        resolve()
      })
    },
    async submitFile (file, fileList) {
      // 获取上传的文件
      console.log(file, 'file')
      await this.beforeUpload(file)
      this.$emit('success', file, fileList)
    },
    handleRemove (file, fileList) {
      console.log(file, fileList, '移除前确认')
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`仅可上传${this.limit}个附件`)
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep .el-upload-list {
    margin-left: 46px;
}
</style>

页面调用：

import fileUpload from '@/components/fileUpload.vue'
components: { fileUpload }

<el-form-item label="上传附件:" class="accessory">
 <file-upload
    :fileList="accessory"
    @success="handlesuccess"
  ></file-upload>
  <div
    style="
      width: 300px;
      color: #999;
      margin-left: 120px;
      font-size: 12px;
    "
  >
    <p>可上传本人简历，作品集及其他代表性附件内容</p>
    <p>附件大小：DOC/DOCX小于10MB，其它小于50MB</p>
  </div>
</el-form-item>

handlesuccess (file, fileList) { // 上传成功
  this.file = file
}

注意：我这里是单文件上传，如果是多文件的话，this.file应该是一个数组，删除的话从数组找file进行删除。。。还有，这里用的是手动上传，也就是在改变upload的时候是不会上传的，只会存在本地，在用户点击提交按钮后用formData处理后调用文件上传接口进行提交，这样做的好处是可以预防服务器脏数据。
实例：

// 附件上传
    async fileUpload () {
      const that = this
      const fileList = []
      fileList.push(this.file) // this.file 就是暂存的file文件
      if (fileList.length) {
        const params = new FormData()
        fileList.map(item => {
          params.append('attachment', item.raw) // attachment就是后端要的键名
        })
        const res = await serve.fileUploads(params) // 调后端接口进行上传
        if (res.data.code === 200) {
          that.enclosure = JSON.parse(JSON.stringify(res.data.data.url)) // 保存返回的filePath和表单一起提交
        } else {
          this.$loading().close()
          that.$message.warning(res.data.msg)
        }
      }
    },

处理成Promise,然后点击提交按钮后利用async,await先执行文件上传，等接口返回文件filePath后再和表单一起提交。

await this.fileUpload()

tips:
校验这块儿，如果大小是统一的话，建议删掉1，放开2