<el-upload
class="upload-demo"
ref="upload"
drag
action="https://jsonplaceholder.typicode.com/posts/"
:limit="1"
accept=".xls,.xlsx"
:on-preview="handlePreview"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
:auto-upload="false">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将发货表单拖到此处,或<em>点击选择</em></div>
<div style="line-height: 25px" class="c-9">每次只能导入一个文件</div>
</el-upload>
然而,发现 accept=".xls,.xlsx" 并没有过滤掉其他文件类型
之前的做法是自己加个判断:
beforeAvatarUpload(file){
let fileName=file.name.substring(file.name.lastIndexOf('.')+1)
const extension = fileName === 'xls'
const extension2 = fileName=== 'xlsx'
if(!extension && !extension2) {
this.$message({
message: '上传文件只能是 xls、xlsx格式!',
type: 'warning'
});
}
}
但是这样做是多此一举了,其实并不是上传组件的问题,而是文件后缀(扩展名)对应有MIME类型,方便iis中或其他服务器对相应的文件进行解析。有些文件的后缀名没有默认解析就出现上传后无法访问或者下载的问题,这个时候就要设置文件后缀对应的MIME类型,设置后才能访问或者下载。accept对应的是MIME类型,所以我们要将文件后缀(扩展名)对应的MIME类型填入。
所以accept=".xls,.xlsx" 应该写成accept=“application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”
参照下面
后缀名 MIME名称
*.3gpp audio/3gpp, video/3gpp
*.ac3 audio/ac3
*.asf allpication/vnd.ms-asf
*.au audio/basic
*.css text/css
*.csv text/csv
*.doc application/msword
*.dot application/msword
*.dtd application/xml-dtd
*.dwg image/vnd.dwg
*.dxf image/vnd.dxf
*.gif image/gif
*.htm text/html
*.html text/html
*.jp2 image/jp2
*.jpe image/jpeg
*.jpeg image/jpeg
*.jpg image/jpeg
*.js text/javascript, application/javascript
*.json application/json
*.mp2 audio/mpeg, video/mpeg
*.mp3 audio/mpeg
*.mp4 audio/mp4, video/mp4
*.mpeg video/mpeg
*.mpg video/mpeg
*.mpp application/vnd.ms-project
*.ogg application/ogg, audio/ogg
*.pdf application/pdf
*.png image/png
*.pot application/vnd.ms-powerpoint
*.pps application/vnd.ms-powerpoint
*.ppt application/vnd.ms-powerpoint
*.rtf application/rtf, text/rtf
*.svf image/vnd.svf
*.tif image/tiff
*.tiff image/tiff
*.txt text/plain
*.wdb application/vnd.ms-works
*.wps application/vnd.ms-works
*.xhtml application/xhtml+xml
*.xlc application/vnd.ms-excel
*.xlm application/vnd.ms-excel
*.xls application/vnd.ms-excel
*.xlt application/vnd.ms-excel
*.xlw application/vnd.ms-excel
*.xml text/xml, application/xml
*.zip aplication/zip
*.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet