Vue项目使用FormData导入文件解析以及实例
Vue项目使用FormData导入文件解析以及实例,前端导入excel、文件、图片等等实现
·
项目场景:
最近项目开发过程中遇见一个前端导入excel的需求,之前做的都是导出,突然来了一个导入,一时还把我唬住了,不过这点需求是难不倒聪明的我,今天不忙就给大家分享出来,希望大家受用。。
问题描述:前端导入excel
解决方案:
1.使用input输入框选择本地文件
<input
@change="addFile"
name="file"
ref="file"
multiple="multiple"
prefix-icon="el-icon-upload2"
type="file"
class="uploadClass"
/>
<button @click="uploadTitle()">上传文件</button>
2.在data中创建一个formDate对象
data(){
return{
formData:new FormData()
}
}
3.将获取的文件添加到formData中
addFile(event) {
// 通过DOM取文件数据
let inputDOM = this.$refs.file;
this.fil = inputDOM.files;
this.formData.append("file", this.fil[0]);
},
4.将文件传给后台(调用后端接口)
uploadTitle() {
if (!this.fil) {
this.$message.warning("请选择文件");
} else {
return new Promise((resolve) => {
let config = {
//添加请求头
headers: { "Content-Type": "multipart/form-data" },
};
axios.post('后端接口', this.formData, config).then(res => {
if (res) {
resolve(res)
}
})
})
}
}
提示:
调用后端接口的时候一定要记得设置http的请求头,否则你是不可能导入成功的
let config = {
headers: { "Content-Type": "multipart/form-data" },
};
更多推荐
已为社区贡献4条内容
所有评论(0)