react使用axios實現(xiàn)上傳下載功能

更新時間：2022年08月15日 10:56:54 作者：岑如花

這篇文章主要為大家詳細介紹了react使用axios實現(xiàn)上傳下載功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了react使用axios實現(xiàn)上傳下載的具體代碼，供大家參考，具體內(nèi)容如下

廢話不多說，直接上干貨

上傳文件前臺代碼

上傳也可以使用Antd前臺庫的上傳組件直接上傳，但博主沒有使用，嘗試自己去實現(xiàn)了這個功能

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的結(jié)構(gòu)，大家也可以放到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));
?? ?}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: