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可以控制,弹出的本地选择文件中的自定义选择:
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是没有效果的。
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;
}
}
其他完整案例
<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 = new FormData();
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格式');
}
},