手写单文件上传，vue3+ts中对接口的封装

最新推荐文章于 2025-09-25 17:58:53 发布

原创

最新推荐文章于 2025-09-25 17:58:53 发布 · 903 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了一个简单的单文件导入功能实现，包括前端文件选择交互及后端数据处理流程。同时，还详细讲解了如何封装axios以简化HTTP请求过程，并展示了具体的使用案例。

最近使用的一个功能，需要用到一个文件导入的功能。这次写的，仅仅是一个单文件导入，把文件发给后端，后端返回给我需要的数据。

<div>
  <el-button @click="onImport" type="primary" icon="el-icon-upload2">导入</el-button>
  <input v-show="false" ref="file" type="file" @change="reads" />
</div>

// 导入
        onImport() {
            this.$refs.file.click()
        },
        reads(e) {
            let file = e.target.files[0];
            if (!(file.name.split('.').pop().toLowerCase() == 'xls' || file.name.split('.').pop().toLowerCase() == 'xlsx')) {
                this.$message({
                    message: '请上传正确的格式文件',
                    type: 'warning'
                });
                return
            }
            let data = new FormData();
            data.append("multipartFile", new Blob([file]));
            api.ExecutiveSummary(data).then(res => {
                if (res.code == 200) {
                    this.tableData = this.tableData.concat(res.data);
                    console.log(this.tableData, '---concat');
                    this.$refs.file.value = ''
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }
            })
        },

需要说明的是,我用的是input原生文件上传通过v-show隐藏input,通过ref获取到该dom,然后出发点击事件,在每次上传完后,要手动清空input中上传的文件: this.$refs.file.value = ''。