一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人。
1.前端vue:模板下载与导入Excel
导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果
class="pull-right"
icon="el-icon-upload"
type="primary"
size="mini"
@click="importFile()"
>批量导入
class="pull-right right-10"
icon="el-icon-download"
type="primary"
size="mini"
@click="downloadFile('档案模板')"
>模板下载
size="mini"
type="primary"
icon="el-icon-plus"
class="pull-right"
@click="addRow"
>新增
placeholder="请输入编码,名称"
prefix-icon="el-icon-search"
v-model="FinQueryParams.archiveFilter"
size="mini"
>
:apiURL="fileUploadUrl"
ref="refFileUpload"
:Refresh="Refresh"
:OtherParams="{brandId: QueryParams.BrandID}"
>
importFile() {
this.$refs.refFileUpload.open();
}
向后台提交文件的方法
submitFile() {
const _this = this;
if (!_this.files.name) {
_this.$message.warning("请选择要上传的文件!");
return false;
}
let fileFormData = new FormData();
//filename是键,file是值,就是要传的文件
fileFormData.append("file", _this.files, _this.files.name);
if(_this.OtherParams){
const keys=Object.keys(_this.OtherParams);
keys.forEach(e=>{
fileFormData.append(e, _this.OtherParams[e]);
})
}
let requestConfig = {
headers: {
"Content-Type": "multipart/form-data"
}
};
AjaxHelper.post(_this.apiURL, fileFormData, requestConfig)
.then(res => {<