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

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

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="3"

:on-exceed="handleExceed"

>

Click to upload

script里：

function handleExceed(){

//提示最多只能上传3个

this.$message.warning(‘图片数量最多为3张’);

}

2.限制文件上传格式

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

  字段： accept=".jpg,.txt"

如果只能图片：accept="image/jpg,image/jpeg,image/png"   // 文件类型

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;

}

}

精彩内容

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：