react使用axios实现上传下载功能
作者：岑如花
这篇文章主要为大家详细介绍了react使用axios实现上传下载功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了react使用axios实现上传下载的具体代码，供大家参考，具体内容如下
废话不多说，直接上干货
上传文件前台代码
上传也可以使用Antd前台库的上传组件直接上传，但博主没有使用，尝试自己去实现了这个功能
import React, { Component } from 'react'
import Axios from 'axios'
export default class upload extends Component {
uploadFile = ()=>{
let file1 = document.querySelector('#input').files[0]
let formdata = new FormData()
formdata.append("file", file1)
Axios({
url:'/api/importExcel',
method: 'post',
headers:{'Content-Type':'multipart/form-data'},
data:formdata
}).then(
request =>{
console.log(request.data)
},
error =>{
console.log(error.data)
}
)
}
render() {
return (
<div>
<input type="file" id="input" ></input>
<button onClick={this.uploadFile}>上传</button>
</div>
)
}
}后台代码：
```java
@RequestMapping(value = "importExcel", method = RequestMethod.POST)
private String importExcel(HttpServletRequest request) throws JsonProcessingException {
boolean result = false;
MultipartHttpServletRequest params = ((MultipartHttpServletRequest) request);
List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("file");
MultipartFile file = null;
BufferedOutputStream stream = null;
for (int i = 0; i < files.size(); ++i) {
file = files.get(i);
if (!file.isEmpty()) {
try {
byte[] bytes = file.getBytes();
stream = new BufferedOutputStream(new FileOutputStream(
new File(uploadFilePath + File.separatorChar + file.getOriginalFilename())));
stream.write(bytes);
stream.flush();
stream.close();
result = true;
} catch (Exception e) {
System.out.println(e);
} finally {
stream = null;
}
}
}
return "success"
}下载文件前台代码
下载文件的部分信息，博主放到了返回报文的报文头中，大家可以通过在前台打印response就可以看到前台的response的结构，大家也可以放到response报文中的其他地方，博主没有尝试
```java
import React, { Component } from 'react'
import Axios from 'axios'
export default class download extends Component {
downLoad = () => {
Axios(
{
url: '/api/exprotFile',
method: 'post',
responseType: 'blob',
data: { 'name': '123' }
}
).then(
response => {
let url = window.URL.createObjectURL(response.data);
let eleLink = document.createElement('a');
eleLink.href = url;
eleLink.download = `${response.headers.filename}`;
document.body.appendChild(eleLink);
eleLink.click();
window.URL.revokeObjectURL(url);
},
error => {
console.log(error.data)
}
)
}
render() {
return (
<div>
<button onClick={this.downLoad}> 下 载 </button>
</div>
)
}
}后台代码
@RequestMapping(value = "exprotFile", method = RequestMethod.POST)
@ResponseBody
private ResponseEntity<FileSystemResource> exportFile(@RequestBody String jsonStr) {
File file = new File("F:\\uploadFile\\test.txt");
HttpHeaders headers = new HttpHeaders();
headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
headers.add("Content-Disposition");
headers.add("Pragma", "no-cache");
headers.add("Expires", "0");
headers.add("Last-Modified", new Date().toString());
headers.add("ETag", String.valueOf(System.currentTimeMillis()));
headers.add("filename", file.getName());
return ResponseEntity.ok().headers(headers).contentLength(file.length())
.contentType(MediaType.parseMediaType("application/octet-stream")).body(new FileSystemResource(file));
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。