警告！！！！！在做文件上传时，axios有一个巨坑（有问题欢迎留言，我会及时帮大伙解决的,可以的话给个关注和收藏哦）
在调用axios提交数据时，参数一定不能实例化（即用qs实例化），不然你一定会一脸懵逼；
话不多说，直接上干货！！！！！！
1.首先先搞一下el-upload的代码（还有很多参数，具体可查看elementui官网）
<el-upload
class="upload-excel"
ref="upload"
action="string"
accept=".xlsx, .xls"
:limit="1"
:http-request="httpRequest"
:file-list="fileList" >
<el-button icon="el-icon-upload"
size="small" type="primary">添加上传文件</el-button> </el-upload>(1)因为我整的是手动上传，所以action就赋值为string(任意字符串都可以了)，但是这个action一定是必填，别问为什么！！！！！
(2)其次accept这个参数就是限定文件格式了，自己看着办哈！！
(3)接着limit就顾名思义了，限制的意思，即个数限制了
(4)http-request参数定义的是一个方法，这个才是重点，它定义的是手动上传方法，覆盖了自动上传，所以这个是骚操作的开始。
(5)紧接着file-list就是下方显示你上传的文件列表了，喜欢就用，不喜欢可以不要的啦
2.参数的话记得使用formData的形式去提交哦
例如：
formData = new window.FormData()
formData.append("grfFile", this.binary);
formData.append("fileId", "grfFile");
如果你想打印formData里面的值，不能直接console.log(formData)这样子你将会一脸懵逼（别慌问题不大）
正规操作是：formData.get('fileId'),这样子才有效果的3.axios这个巨坑来了（请使用纯净版的axios，千万不要使用二次封装的axios，不然你会相当痛苦的！！！！！）
注意了喂！！ this.$axios是我在main.js文件那里全局引入了axios进行全局挂载的,
小伙伴们记得要引入axios哈（纯净版的axios，千万不要使用二次封装的axios，你会相当痛苦的）
this.$axios({
url:this.url,//后端接口地址
method: "post",
data: this.formData,//参数
processData: false, // 告诉axios不要去处理发送的数据(重要参数)
contentType: false // 告诉axios不要去设置Content-Type请求头
}).then(res => {
//看具体接口怎么写的来定
if (res && res.data.code == "200") {
this.fileList = [];
this.formData = new window.FormData(); //清空之前的文件，避免影响下一次的运行
this.$message({
type: "success",
message: "导入成功"
});
} else {
this.fileList = [];
this.formData = new window.FormData();//清空之前的文件，避免影响下一次的运行
this.$message({
type: "error",
message: "导入失败," + res.data.msg
});
}
});4.来个效果图提提神（颜色有点白，大家讲究一下吧）
5.现在来上个完整代码，已经封装成通用组件了，喜欢的小伙伴可以拿去用
（这是一个弹窗组件来的，我不追求样式，所以有点简陋，别吐槽哈哈哈哈）
<template>
<el-dialog
:title=title
modal-append-to-body
:visible.sync="visible"
width="40%"
style="left:10%"
:before-close="cancel" >
<div>
<div style="color:red;margin-bottom:30px;float:right;" >
<a @click="handleDownload" slot="reference">点击下载(导入模板.xls)</a>
</div>
<div style="margin-bottom:20px;">
<el-upload
class="upload-excel"
ref="upload"
action="string"
accept=".xlsx, .xls"
:limit="1"
:http-request="httpRequest"
:file-list="fileList"
>
<el-button
icon="el-icon-upload"
size="small" type="primary">添加上传文件</el-button>
</el-upload>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="cancel()">取 消</el-button>
<el-button size="small" type="primary" @click="confirm()">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import { exportInternetCelebrityRecording } from "@/api/productManagement";
import downloadFile from "@/utils/downloadFile";
export default {
props: {
//控制弹窗显示隐藏
visible: {
type: Boolean,
default: false
},
//模板下载地址
templateUrl:{
type:String
},
//接口地址
url:{
type:String
},
//弹窗标题
title:{
type:String
}
},
data() {
return {
tableHeight: window.innerHeight * 0.6,
formData: new window.FormData(),
binary: {}, //导入的文件
fileId: "",
fileList: [],
};
},
methods: {
// 覆盖默认上传行为
httpRequest(params) {
this.binary = params.file;
this.formData.append("grfFile", this.binary);
this.formData.append("fileId", "grfFile");
},
// 下载模板
handleDownload() {
let path = "";
downloadFile(this.templateUrl, path);
},
// 取消
cancel() {
this.$emit("update:visible", false);
},
// 确定
confirm() {
//提交的参数具体记得和后端商量一下哈，不然就是坑
this.$axios({
url:this.url,
method: "post",
data: this.formData,
processData: false, // 告诉axios不要去处理发送的数据(重要参数)
contentType: false // 告诉axios不要去设置Content-Type请求头
}).then(res => {
if (res && res.data.code == "200") {
this.$emit("update:visible", false);
this.fileList = [];
this.formData = new window.FormData();
this.$message({
type: "success",
message: "导入成功"
});
} else {
this.fileList = [];
this.formData = new window.FormData();
this.$message({
type: "error",
message: "导入失败," + res.data.msg
});
}
});
}
}};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__body { padding: 0 20px; max-height: 600px; overflow-y: hidden;}
.input_data { margin-bottom: 20px;}
h3 { float: left;}
</style> 
