用vue中的el-upload写一个仅支持xls、xlsx文件的,且上传文件不得大于20M的前端代码
时间: 2023-06-08 18:04:48 浏览: 133
好的,我会尽力为您解答。
您可以使用el-upload组件中的accept属性指定仅支持xls、xlsx格式的文件,然后使用before-upload属性进行文件大小校验。以下是示例代码:
```
<template>
<div>
<el-upload
class="upload-demo"
:action="uploadAction"
:before-upload="beforeUpload"
:limit="1"
:file-list="fileList"
:on-success="onSuccess"
:on-error="onError"
:auto-upload="false"
:show-file-list="false"
>
<el-button slot="trigger" size="small" type="primary">上传文件</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
uploadAction: '/api/upload',
};
},
methods: {
beforeUpload(file) {
const isXLS = file.type === 'application/vnd.ms-excel';
const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
const isLt20M = file.size / 1024 / 1024 < 20;
if (!isXLS && !isXLSX) {
this.$message.error('上传文件只能是xls或xlsx格式!');
return false;
}
if (!isLt20M) {
this.$message.error('上传文件大小不能超过 20MB!');
return false;
}
return true;
},
onSuccess(response, file, fileList) {
this.$message.success('上传成功!');
},
onError(error, file, fileList) {
this.$message.error('上传失败!');
},
},
};
</script>
```
需要注意的是,此处的上传地址(uploadAction)需要根据您的实际情况进行修改。
阅读全文