vue用element-UI实现上传本地某一个Excel文件,点击上传按钮,选择文件,上传前验证这个excel文件是否是.xlxs类型 的文件,如果不是提示“请上传.xlxs类型的文件”,如果符合要求,就传递给后端,上传成功后提示“上
时间: 2024-05-22 10:14:49 浏览: 14
传成功”。
实现步骤:
1. 引入element-UI组件库和axios库。
2. 在template中添加一个el-upload组件,设置action为上传接口地址,设置before-upload属性为一个函数。
3. 在methods中定义beforeUpload函数,用来验证上传文件的类型是否为.xlxs。
4. 如果上传文件类型不符合要求,使用this.$message提示用户“请上传.xlxs类型的文件”,并返回false,阻止上传。
5. 如果上传文件类型符合要求,返回true,允许上传。
6. 在methods中定义handleUploadSuccess函数,用来处理上传成功后的逻辑。使用this.$message提示用户“上传成功”。
7. 在methods中定义handleUploadError函数,用来处理上传失败后的逻辑。使用this.$message提示用户“上传失败”。
8. 在data中定义一个变量uploadHeaders,用来设置上传请求的header。
9. 在created生命周期中设置uploadHeaders的值,将token设置到header中。
10. 在mounted生命周期中,使用this.$refs.upload.clearFiles()方法清空上传文件列表,防止重复上传。
示例代码如下:
<template>
<div>
<el-upload
ref="upload"
class="upload-demo"
:show-file-list="false"
:before-upload="beforeUpload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
:headers="uploadHeaders"
:action="uploadUrl"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
uploadUrl: 'your_upload_url',
uploadHeaders: {},
};
},
created() {
this.uploadHeaders = {
Authorization: `Bearer ${this.$store.state.token}`,
};
},
methods: {
beforeUpload(file) {
const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
if (!isXlsx) {
this.$message.error('请上传.xlsx类型的文件');
return false;
}
return true;
},
handleUploadSuccess(response) {
this.$message.success('上传成功');
},
handleUploadError(error) {
this.$message.error('上传失败');
},
},
mounted() {
this.$refs.upload.clearFiles();
},
};
</script>