使用upload上传文件到服务器中
在上传文件中,遇到了想要限制成上传xls/xlsx文件的需求,看了官方文档中写的el-upload介绍以及百度,现有两种方式限制上传文件类型。
一、使用accept属性,限制上传类型(好处是,在点击上传的时候会将其他类型的文件过滤掉)
<el-upload
class="upload-demo"
drag
action="(服务器地址)"
:on-change="handleChange"
:headers="headers"
:data="listData"
name="list"
ref="upload"
accept=".xls,.xlsx"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将xls/xlsx文件拖到此处,或<em>点击上传</em>
</div>
</el-upload>
二、使用before-upload,好处是在你将其他类型的文件上传后,会有提示信息,提示你文件类型不对
<el-upload
class="upload-demo"
drag
action="(服务器地址)"
:on-change="handleChange"
:headers="headers"
:data="listData"
name="list"
ref="upload"
:before-upload="handleBefore"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将xls/xlsx文件拖到此处,或<em>点击上传</em>
</div>
</el-upload>
js
handleBefore(file) {
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension = testmsg == 'xls'
const extension2 = testmsg == 'xlsx'
if (!extension && !extension2) {
this.$message({
message: '上传文件只能是 xls、xlsx格式!',
type: 'warning'
})
}
return extension || extension2
},