el-upload 限制文件上传数量、类型

1.限制文件上传数量为20

需要添加 :limit=“20” ,以及 on-exceed 属性。limit属性用来控制文件上传的数量，on-exceed 是当上传的文件超出限制时，触发的钩子函数。el-upload代码：

<el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :before-upload="beforeUpload"
    :limit="20"
    :on-exceed="handleExceed"
  >
    <el-button type="primary">Click to upload</el-button>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500KB.
      </div>
    </template>
  </el-upload>

script里：

function handleExceed(){
    //提示最多只能上传20个
    warn('最多上传20个文件！');
}

2.限制文件上传格式

需要用到 accept 属性，accept可以控制，弹出的本地选择文件中的自定义选择：

<el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :limit="20"
    :on-exceed="handleExceed"
    accept=".jpg,.txt"
  />

这样自定义选择项，只有“jpg"、"text"格式的文件能被选择：

而选择”所有文件“，则相当于没有限制类型，这时候应该在文件上传成功之前的钩子函数里，做一下限制。这里auto-upload（是否自动上传）是true，可以用before-upload，当自动上传关掉以后，before-upload是没有效果的。

function beforeUpload(file){
    // 截取上传的文件名后缀
    let fileExtName = file.name.substring(file.name.lastIndexOf(;.) + 1);
    if(
        fileExtName === '.jpg' &&
        fileExtName === '.txt'
    ){
       //进行上传成功的一些操作;
        console.log('file',file);
    }else{
         // 提醒只能上传的文件类型
        warn('只能上传.jpg、.txt类型的文件！');
        return;
    }
}