小功能剪切:
1、复制组件库组件
其他属性请查看组件库:https://element.eleme.cn/#/zh-CN/component/upload
:http-request //导入数据的方法(接口)
<el-upload ref="upload" action="" :http-request="importData" :auto-upload="true" :show-file-list="false">
<el-button size="medium" class="search-btn">
<i class="el-icon-download"></i>
导 入
</el-button>
</el-upload>
2、实现方法
importData(file) {
let me = this;
let url = '';
switch (me.type) {
case '行业财会监督人才库':
url = 'XXX';
break;
case '师资库':
url = 'XXX';
break;
case '资深会员':
url = 'XXX';
break;
default:
break;
}
if (!url) return;
const from = new FormData();
from.append('multipartFile', file.file);//把上传的文件对象传进去,下面展示数据大家查看
me.$axios({
url: url,
method: "post",
data: from,
headers: {
"Content-type": "multipart/form-data;charset=utf-8",//接口里面的Content-Type
}
}).then(res => {
if (res.data.code == 200) {
me.$message({
message: '导入成功',
type: 'success'
});
me.getData();
} else {
let msg = res.data.msg
msg = msg.replace(/\n/g, '<br/>')
me.$message({
dangerouslyUseHTMLString: true,
message: msg,
type: 'warning'
})
}
}).catch(err => { })
},
3、上传file对象
4、看后台返回Content-Type类型,把这个放进接口 headers :{ } 里去
这样基本可以实现单个文件上传了,快弄,下班~