🎊 vue +element的上传文件限制文件大小和限制文件类型

vue +element的上传文件限制文件大小和限制文件类型

element的文件上传的文档中介绍：

参数说明类型accept接受上传的文件类型（thumbnail-mode 模式下此参数无效）string下面附上代码

class="upload-demo"

action="https://jsonplaceholder.typicode.com/posts/"

:on-preview="handlePreview"

:on-remove="handleRemove"

:on-change="onchange"

:before-upload="beforeAvatarUpload"

:before-remove="beforeRemove"

accept=".rar,.zip,.doc,.docx,.pdf"

multiple

:limit="3"

:auto-upload="false"

:on-exceed="handleExceed"

:file-list="fileList"

>

选择附件

实际效果

说明

这里只设置一个accept 是不可行的，用户还可可以选择所有文件进行上传。

这里可以用on-change进行添加文件的时候进行附加判断，

fileList是上传文件的集合，判断上传文件的file对象的name和size属性判断新添加文件的类型和大小。

代码

//html部分

class="upload-demo"

action="https://jsonplaceholder.typicode.com/posts/"

:on-preview="handlePreview"

:on-remove="handleRemove"

:on-change="onchange"

:before-upload="beforeAvatarUpload"

:before-remove="beforeRemove"

accept=".rar,.zip,.doc,.docx,.pdf"

multiple

:limit="3"

:auto-upload="false"

:on-exceed="handleExceed"

:file-list="fileList"

>

选择附件

//js部分

onchange(file,fileList) {

let fileName = file.name;

let uid = file.uid

let pos = fileName.lastIndexOf(".");

let lastName = fileName.substring(pos, fileName.length);

if (

lastName.toLowerCase() !== ".zip" &&

lastName.toLowerCase() !== ".rar"&&

lastName.toLowerCase() !== ".docx"&&

lastName.toLowerCase() !== ".pdf"

) {

this.$message.error("文件必须为.rar .zip .doc .docx .pdf 类型");

// this.resetCompressData()

for(var i = 0;i

if(fileList[i].uid == uid) {

fileList.splice(i,1)

}

}

return;

}

// 限制上传文件的大小

const isLt =

file.size / 1024 / 5 >= 1 && file.size / 1024 / 1024 / 20 <= 1;

if (!isLt) {

this.$message.error("上传文件大小不得小于5KB,不得大于20MB!");

for(var i = 0;i

if(fileList[i].uid == uid) {

fileList.splice(i,1)

}

}

}

return isLt;

},

此时，上传限制类型和限制大小的上传功能完成

结果展示

应大哥的诉求，我的代码确实不完整，下面就是整个上传文件的完整代码

import {GetCollList,getAllNote,GetMyNote,getNoteSearch} from '../../api/apis'