近日因业务需求，要用到ElementUI的el-upload上传组件来实现拖拽上传功能。
结果，发现在组件上加上accept文件过滤字段之后，如果用户选错文件进行拖拽上传时，上传事件会直接被终止，而又不会弹出任何错误信息——例如，提示上传的文件格式不对，这种体验很不友好。
通过测试发现，原来加上accept字段之后，如果拖拽的文件格式不对，根本不会触发before-upload，所以原本用来验证文件的事件根本没被调用，因此没有弹出任何提示。
经过总结，发现只要在el-upload组件加上原生的drop事件即可解决上述问题。即：
@drop.native="e => beforeUploadHandler(e.dataTransfer.files[0])"
以下为代码示例：
<template>
<div class="upload-wrap">
<el-upload
action
accept=".png,.jpg,.jpeg"
msgPage
drag
:show-file-list="false"
:http-request="e => requestHandler(e)"
:before-upload="file => beforeUploadHandler(file, 512000, ['image/png', 'image/jpg', 'image/jpeg'])"
//该处加入原生drop事件，获取拖拽的文件
@drop.native="e => beforeUploadHandler(e.dataTransfer.files[0], 512000, ['image/png', 'image/jpg', 'image/jpeg'])"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传PNG,JPG,JPEG文件，且不超过500kb。</div>
</el-upload>
</div>
</template>
<script>
export default {
name: 'default',
data() {
return {
};
},
methods: {
//http-request: 覆盖默认的上传行为，自定义上传方法
requestHandler(e){
console.log(e);
},
//before-upload: 上传之前进行文件验证
beforeUploadHandler(file, size, accept){
console.log(file, size, accept);
//验证文件大小
if(file.size > size){
this.$message.info(`上传文件不能大于500kb`);
return false;
}
//验证文件类型
if(accept.indexOf(file.type) == -1){
this.$message.info(`只能上传${accept.join('、')}文件`);
return false;
}
return true;
}
}
};
</script>
<style lang="scss" scoped>
.upload-wrap{
margin-top: 30px;
text-align: center;
}
</style>
