<el-button
type="primary"
style="margin-left: 10px"
@click="sixthBatchImport" // 点击事件触发下面input点击
>
批量导入
</el-button>
<input
id="sixthInput"
type="file"
style="display: none"
@change="onFileChange" // 点击选取文件,之后检验、调用接口等操作
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" // 上传文件的类型, 媒体类型
/>
对应方法:
// 批量导入
const sixthBatchImport = () => {
const input: HTMLInputElement | null = document.querySelector("#sixthInput");
input?.click();
};
// 选取文件后调用接口
const onFileChange = (e: any) => {
const file = e.target.files[0];
// 上传文件的文件流是无法被序列化并传递的。所以我们就可以使用到formdata对象
// 简单理解就是new FormData()包裹之后 生成的是二进制文件流
let formData = new FormData();
formData.append("file", file);
};
vue中点击按钮上传文件
最新推荐文章于 2024-07-18 17:19:16 发布