element 上传组件不立即上传如何判断文件类型(auto-upload=‘false‘),accept不能完全限制上传文件格式
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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) //后端接口
},
完
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)