如何用React和axios实现一个长尾词的上传下载功能？

本文共计910个文字，预计阅读时间需要4分钟。

本文将分享一个React应用中使用axios实现上传下载功能的整体代码示例。以下为关键步骤：

1. 上传文件前端代码：javascriptimport React from 'react';import axios from 'axios';import { Upload, Button } from 'antd';

const UploadFile=()=> { const handleUpload=async (file)=> { const formData=new FormData(); formData.append('file', file); try { const response=await axios.post('/upload', formData); console.log('文件上传成功', response); } catch (error) { console.error('文件上传失败', error); } };

return ( );};

export default UploadFile;

2. 上传文件后端代码（Node.js示例）：javascriptconst express=require('express');const multer=require('multer');const upload=multer({ dest: 'uploads/' });

const app=express();

app.post('/upload', upload.single('file'), (req, res)=> { console.log('文件上传成功', req.file); res.send('文件上传成功');});

app.listen(3000, ()=> { console.log('服务器启动成功，监听3000端口');});

3. 下载文件前端代码：javascriptimport React from 'react';import axios from 'axios';import { Button } from 'antd';

const DownloadFile=()=> { const handleDownload=()=> { axios.get('/download', { responseType: 'blob', }).then((response)=> { const url=window.URL.createObjectURL(new Blob([response.data])); const link=document.createElement('a'); link.href=url; link.setAttribute('download', 'filename'); // 设置下载文件名 document.body.appendChild(link); link.click(); link.parentNode.removeChild(link); }); };

return ;};

export default DownloadFile;

4. 下载文件后端代码（Node.js示例）：javascriptconst express=require('express');const fs=require('fs');const path=require('path');

const app=express();

app.get('/download', (req, res)=> { const filePath=path.join(__dirname, 'uploads', 'filename'); const file=fs.createReadStream(filePath); res.setHeader('Content-Disposition', 'attachment; filename=filename'); file.pipe(res);});

app.listen(3000, ()=> { console.log('服务器启动成功，监听3000端口');});

以上为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));     }

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