vue+axios+element formData实现文件上传

文件下载分为两步

1. 上传模板EXCEL，使用formData提交

2. 提交成功后，接口返回文件流，前端写入EXCEL实现下载

ps: 使用表单提交的原因是，excel文件中包含ID，后端需要读取ID查询记录后，再把数据流通过接口返回

代码实现

1. vue组件

<template>
    <el-dialog
        title="批量导入"
        :visible.sync="dialogVisible"
        width="600px"
        >
        <div>1.请先获取批量添加设备的Excel模板将需要添加的信息填写后进行上传该Excel文件，
          上传非规范文件可能造成数据错误，<el-button type='text' @click='exportModel'>点击下载</el-button>模板文件。
        </div>
        <div>
            2.请选择上传文件，并上传。
        </div>
        <div style='margin-top:20px;'>
            <el-upload
              class="upload-demo"
              ref="upload"
              :headers = 'headers'
              :on-success='successCallback'
              :on-change='fileChange'
              :show-file-list='false'
              :data='{billFile: fileName}'
              :on-error='fileError'
              :action="uploadUrl"
              :limit='1'
              :auto-upload="false">
              <el-input v-model="fileName" style='width:200px;float:left;margin-right:5px;'></el-input>
			<el-button slot="trigger" @click='uploadClick' type="primary">浏览...</el-button>
            </el-upload>
        </div>
				
        <div slot="footer" class="dialog-footer" style='text-align:center'>
          <el-button type="primary" @click="submitUpload" :disabled="uploadDisabled">上传</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>

methods: {
  submitUpload () {
	// axios封装的方法
	exportExcelNew(this.uploadUrl, {billFile: this.fileName, file: this.files.raw});
    // element提交的表单提交方法
    // 不使用element提供的方法，是因为不能设置responseType
	// this.$refs.upload.submit();
  } 
		
}

 封装exportExcelNew方法

export function exportExcelNew (url, opt, method) {
	method = method || 'post';
	let data = new FormData();
    // formData提交
    Object.keys(opt).forEach(v => {
      data.append(v, opt[v]);
	});
	axios({
		url: url,
		method,
		data,
		headers: {
			'Session-Id': localStorage.secret,
			'Content-Type': 'multipart/form-data'
		},
		responseType: 'arraybuffer' // 响应类型
	}).then(res => {
		
         // 处理接口返回的文件流实现下载
		let blob = new Blob([res.data], { type: 'application/x-xls' });
		var filename = sessionStorage.getItem('filename') || "download.xls";
		var a = document.createElement('a');
		var url = window.URL.createObjectURL(blob);
		a.href = url;
		a.download = filename;
		var body = document.getElementsByTagName('body')[0];
		body.appendChild(a);
		a.click();
		body.removeChild(a);
		window.URL.revokeObjectURL(url);
			
	}
	}, err => {
		console.log(err);
	});
	
}

后续问题：

1.  100条数据可以正常下载，数据量超过120条，下载的文件就不能打开，排查原因是下载的数据不完整

2.  导致数据不完整的原因是，后端还没有把数据完全返回，http检测到接口请求成功，中断了连接

解决方法：

使用原生表单提交，使用后端下载

<form action="/uicps-query/export/dtsParkRecord"
	method="post"
	ref="upload"
	enctype="multipart/form-data">
	<table>
		<tr>
			<td width="60" align="right">文件上传:</td>
				<td>
					<input ref="fl" type="file" name="file" @change="imgView"/>
				</td>
			<td>
			<input type="submit" value="上传" class="el-button--primary submitBtn" @click="submitUpload">
			</td>
		</tr>
	</table>
</form>