element-ui的文件上传限制文件类型和大小

1.给el-upload组件定义好beforeUpload，beforeRemove方法。

<el-upload
  ref="upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :limit="3"
  :on-change="handleChange"
  :on-exceed="handleExceed"
  :auto-upload="false"
  :show-file-list="true"
  :before-upload="beforeUpload"
  :http-request="UploadFile"
  class="upload-demo"
  action="string"
>
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

2.首先要定义before-upload 方法。我这里限制文件类型不能是exe,iso。限制文件大小5M。

beforeUpload(file) {
  console.log('文件：', file)
  var FileExt = file.name.replace(/.+\./, "")
  const isLt5M = file.size / 1024 / 1024 < 5
  var extension = ['exe', 'iso'].indexOf(FileExt.toLowerCase()) === -1
  if (!extension){  
    this.$message({
        type: 'warning',
        message: '禁止上传 exe, iso 文件！'
     })
    return false
  }
  if (!isLt5M) {
    this.$message({
        type: 'warning',
        message: '附件大小超限，文件不能超过 5M'
     })       
    return false
  }
},

3.只做这些还不够，不符合规则的文件还是会出现在预览文件列表里。且el-upload组件会自动弹出删除确认按钮。体验非常不好。因此还需要在before-remove方法中做一些处理。

beforeRemove(file, fileList) {
  var FileExt = file.name.replace(/.+\./, "")
  var isLt5M = file.size / 1024 / 1024 < 5
  var extension = ['exe', 'iso'].indexOf(FileExt.toLowerCase()) === -1
  if (!extension || !isLt5M) {
    var i = fileList.indexOf(file)
    fileList.splice(i, 1) // 自动删除不符合要求的文件，不让它出现在预览列表中
    return false // 只有return false 才会真的限制
  } else {
    return this.$confirm(`确定移除 ${file.name}？`)
  }
},

4.如有问题欢迎留言交流。