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 = https://www.it610.com/article/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 ()}}

【react使用axios实现上传下载功能】后台代码：

```java@RequestMapping(value = "https://www.it610.com/article/importExcel", method = RequestMethod.POST)private String importExcel(HttpServletRequest request) throws JsonProcessingException {boolean result = false; MultipartHttpServletRequest params = ((MultipartHttpServletRequest) request); List 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报文中的其他地方，博主没有尝试

```javaimport 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 = https://www.it610.com/article/url; eleLink.download = `${response.headers.filename}`; document.body.appendChild(eleLink); eleLink.click(); window.URL.revokeObjectURL(url); },error => {console.log(error.data)})}render() {return ()}}

后台代码

@RequestMapping(value = "https://www.it610.com/article/exprotFile", method = RequestMethod.POST)@ResponseBodyprivate ResponseEntity 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)); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。