el-upload实现导入excel表格(formData)

最新推荐文章于 2024-03-15 14:41:32 发布

Franky-

最新推荐文章于 2024-03-15 14:41:32 发布

阅读量2.7k

点赞数 5

分类专栏： js elementui vue

本文链接：https://blog.csdn.net/weixin_42333170/article/details/104984852

版权

js 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

elementui

9 篇文章 1 订阅

订阅专栏

需求如下:
在这里插入图片描述

实现代码
html

<el-upload
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    action=""
    :before-upload="beforeUpload">
   <el-button size="small" type="primary">导入</el-button>
 </el-upload>

import axios from 'axios';

data () {
	return {
		files: {},
	}
}

methods: {
	beforeUpload(file){
	    this.files = file;
	    this.submitUpload();
	    return false;  //  取消默认上传
	},
	submitUpload() {
		 if(this.files.name == ""){
		     this.$message.warning('请选择要上传的文件！')
		     return false
		 }
		 let fileFormData = new FormData();
		 let data = this.files
		 fileFormData.append('file', data, this.files.name); //  注意'file'要和后端统一
		 let headers = {
		    'Content-Type': 'multipart/form-data' // 设置请求头
		 }
		 axios.post('/api/import', fileFormData, headers).then(res=>{
		   this.$message.success('导入成功')
		   this.getList() // 刷新列表
		 }).catch((e) => {
		   this.$message.error("上传失败，请重新上传");
	  	 })
	}
}