在使用element的上传时,遇到限制文件类型的需求,但是在上传不符合要求的文件时,会弹出确认删除的确认框和不符合类型的message的提示,解决方法如下:
html:
<el-upload ref="upload"
:file-list="form.fileList"
action="http://..."
:data="params"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload='handleBeforeUpload'
:on-success="handleSuccess"
:before-remove="beforeRemove"
accept=".jpg,.jpeg,.png,.pdf,.PDF,.doc.docx"
:on-exceed="handleExceed">
<el-button size="small"
type="primary">点击上传
</el-button>
</el-upload>
js:
// 删除前(判断return出false时,会调用before-remove回调!),判断上传文件状态
beforeRemove(file, fileList) {
if (file && file.status === 'success') {
return this.$confirm('确定移除' + file.name + '?', '删除', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
return delObj(file.id, this.userInfo.userId)
})
.then(() => {
this.$message.success('已删除')
this.getFile()
})
}
},
// 上传之前判断类型
handleBeforeUpload(file) {
console.log('file===', file)
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
console.log('testmsg===', testmsg)
// .jpg,.jpeg,.png,.pdf,.PDF
const extension1 = testmsg === 'jpg'
const extension2 = testmsg === 'jpeg'
const extension3 = testmsg === 'png'
const extension4 = testmsg === 'pdf'
const extension5 = testmsg === 'PDF'
const extension6 = testmsg === 'doc'
const extension7 = testmsg === 'docx'
// const isLt2M = file.size / 1024 / 1024 < 10
if (
!extension1 &&
!extension2 &&
!extension3 &&
!extension4 &&
!extension5 &&
!extension6 &&
!extension7
) {
this.$message({
message: '上传文件只能是.jpg,.jpeg,.png,.pdf,.PDF,.doc,.docx格式!',
type: 'warning'
})
return false
} else {
return true
}
},