vue使用element-ui库的拖拽上传组件加类型限制后不会执行before-upload事件

<el-upload

class="upload-demo"

accept=".doc, .docx, .xlsx, .xls, .txt, .pdf, .html, .htm"

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

drag

:multiple="false"

:show-file-list="false"

:before-upload="changeUpload"

:on-success="successUpload"

:on-error="errorUpload"

:on-progress="progressUpload"

>

<div class="upload-cont">

<div class="el-upload__text">拖拽或点击上传简历</div>

<div class="el-upload__tip">

支持格式： “doc”,“.docx”,“.pdf”,“.xls”,“.xlsx”,“.txt”<br/>,“.html”,“.htm”，文件大小不超过 5MB

</div>

</div>

<div class="upload-cont analysis-cont">

<div class="el-upload__text">正在解析，请稍等...</div>

<div class="el-upload__tip">解析可能需要几秒钟的时间，请耐心等待</div>

<div class="progress">

<div class="progress-bar progress-bar-warning progress-bar-striped active"></div>

</div>

</div>

</el-upload>

 

vue使用element-ui的上传组件，加了accept=".doc, .docx, .xlsx, .xls, .txt, .pdf, .html, .htm"文件类型限制后before-upload中的文件判断校验在拖文件进入时不会执行，但是点击添加文件的时候还是会执行，大佬帮忙看看怎么回事

 

js代码：

changeUpload (files) {

let filesType = files.name.split('.')[1];

const typeList = ['doc', 'docx', 'xlsx', 'xls', 'txt', 'pdf', 'html', 'htm'];

const sizeOff = (files.size / 1024 / 1024) <= 5;

let typeOff = typeList.some((item) => {

return filesType == item

});

if (!typeOff){

this.$message.error('上传简历格式不正确!');

this.disableStyle(false);

};

if (!sizeOff){

this.$message.error('文件大小不超过5MB!');

this.disableStyle(false);

};

return typeOff && sizeOff;

}

• 点赞
• 收藏
• 分享
• 文章举报

萨摩耶丿 发布了4 篇原创文章 · 获赞 1 · 访问量 1211 私信 关注