组件代码如下
<el-upload
style="width: 100%"
class="upload-file"
ref="upload"
:action="actions"
:headers="headers"
:limit="limit"
accept=".xls,.xlsx"
:before-upload="beforeUpload"
:on-preview="onPreview"
:on-exceed="onExceed"
:file-list="fileList"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传xls/xlsx文件,且不超过一个,最大10M
</div>
</el-upload>
beforeUpload
beforeUpload(file) {
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension = testmsg === 'xls'
const extension2 = testmsg === 'xlsx'
const isLt10M = file.size / 1024 / 1024 < 10
if (!extension && !extension2) {
this.$message({
message: '上传文件只能是 xls、xlsx格式!',
type: 'warning'
})
}
if (!isLt10M) {
this.$message({
message: '上传文件大小不能超过 10MB!',
type: 'warning'
})
}
if ((extension || extension2) && isLt10M) {
// 获取文件并转成formData对象方便提交给后台
const formData = new FormData()
formData.append('file', file)
}
return (extension || extension2) && isLt10M
},
网友评论