react上传下载功能
岑如花 人气:0废话不多说,直接上干货
上传文件前台代码
上传也可以使用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)); }
加载全部内容