element 上传组件不立即上传如何判断文件类型(auto-upload=‘false‘),accept不能完全限制上传文件格式
问题
accept不能完全限制上传文件格式
使用accept虽然可以在拖拽上传时避免传入其他文件,但是使用点击上传时无法做到完全过滤。
点击全部就可以对所有类型文件进行上传!
如图,选择所有文件就可以对所有格式的文件进行上传!
auto-upload='false’时不能使用before-upload钩子
实现代码
组件代码
<el-upload
drag
action="/"
accept=".txt"
:auto-upload="false"
:file-list="fileList"
:on-change="onChangeFile"
>
<i class="el-icon-upload" />
<div class="el-upload__text">
将.txt格式的文件拖到此处,或<em>点击上传</em>
</div>
</el-upload>
方法代码
// 判断文件类型方法
onChangeFile(file, fileList) {
if (file.name.split('.').pop() !== 'txt' && file.name.split('.').pop() !== 'TXT') { // 类型有可能大写,记得要写
fileList = []
this.fileList = []
this.$message({
message: '请上传.txt格式的文件',
type: 'error'
})
} else {
this.fileList = fileList.length > 0 ? [file.raw] : []
}
},
// 上传方法
async onSubmit() {
const formData = new FormData()
formData.append('file', this.fileList[0])
const res = await this.$api.xxxx.xxxx(formData) //后端接口
},