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

文件下载分为两步

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

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

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

代码实现

1. vue组件

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检测到接口请求成功，中断了连接

解决方法：

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

	

		

			
文件上传: