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

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里：

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

2.限制文件上传格式
需要用到 accept 属性，accept可以控制，弹出的本地选择文件中的自定义选择：
accept=“.jpg,.txt"这样自定义选择项，只有“jpg”、"text"格式的文件能被选择：

<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"/>

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

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

其他完整案例

<el-upload  
             style="display: inline-block;"class="upload-demo" 
             accept=".pdf,.jpg,.png"
             action="Fake Action":before-upload="uploadSuccess":show-file-list="false":file-list="fileList"><el-button size="mini" type="primary">点击上传</el-button><span slot="tip"class="el-upload__tip">支持pdf,jpg,png格式文件</span></el-upload>uploadSuccess(file){// 截取上传文件的后缀名let fileType = file.name.substring(file.name.lastIndexOf(".")+1);// 判断文件名的类型if(fileType ==='pdf'|| fileType ==='jpg'|| fileType ==='png'){const fd =newFormData();
          fd.append('file', file)const config ={
            headers:{'Content-Type':'multipart/form-data'}}
          axios.post(window.gapi +"/api/gemp/risktip/manage/upload/v1", fd, config).then((res)=>{if(res.data.status ===200){this.form.accessoryName = res.data.data
              this.isUpload =true}}).catch((err)=>{
            console.log(err)})}else{this.$message.error('上传文件仅支持pdf,jpg,png格式');}},