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));
	}