想要从 React UI 上传 zip 文件夹并将其发送到后端节点 js 服务器，我可以从那里将该文件夹放置在我系统上的某个路径中

Posted 2023-03-06

【中文标题】想要从 React UI 上传 zip 文件夹并将其发送到后端节点 js 服务器，我可以从那里将该文件夹放置在我系统上的某个路径中

【英文标题】：want to upload zip folders from react UI and send it to backend node js server from where i can place that folder in a ceratin path on my system

【发布时间】：2021-06-02 12:11:21

【问题描述】：

前端 在这里，我正在尝试从 React UI Input 上传一个包含一些 csv 文件的压缩文件夹

import React,  useState  from "react";
import axios from "axios";

function App() 
  const [uploadFile, setUploadFile] = useState("")

  const handleFileReader = (event) => 
    let reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    reader.onload = (e) => 
      setUploadFile(e.target.result)
    ;
  

  const uploadHandler = () => 
      axios.post('https://localhost:5000/uploaded_file', uploadFile)
  ;

  return (
    <div className="App">
     <label>Select a Folder</label>
       <input
        onChange=handleFileReader                
        type="file"
        accept=".zip,.rar,.7zip"
       />
      <button onClick=uploadHandler>
         Upload Folder
      </button>
    </div>
  );


export default App;

后端 在这里，我想解压缩上传的 zip 文件夹并将其放置在本地系统上的某个路径/位置。

const express = require("express");
const bodyParser = require('body-parser');
const cors = require('cors');
const PORT = process.env.PORT || 5000;

const app = express();
app.use(cors());

app.use(bodyParser.urlencoded( limit: '50mb', extended: true ))
app.use(bodyParser.json( limit: '50mb' ))

app.post("/uploaded_file", (req, res) => 
 console.log(req.body)
);

app.listen(PORT, () => 
  console.log(`Server listening on $PORT`);
);

在 req.body 我收到data:application/x-zip-compressed;base64,UEsDBBQAA.......... 我被困在这里。 如何将这个缓冲的数据转换成原始形式？

感谢您的帮助。

【参考方案1】：

前端

import React,  useState  from "react";
import axios from "axios";

function App() 
  const [uploadFile, setUploadFile] = useState("")

  const handleFileReader = (event) => 
    let reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    reader.onload = (e) => 
      setUploadFile(data:reader.result.split(',').pop(),fileName:event.target.files[0].name)
    ;
  

  const uploadHandler = () => 
      axios.post('https://localhost:5000/uploaded_file', uploadFile)
  ;

  return (
    <div className="App">
     <label>Select a Folder</label>
       <input
        onChange=handleFileReader                
        type="file"
        accept=".zip,.rar,.7zip"
       />
      <button onClick=uploadHandler>
         Upload Folder
      </button>
    </div>
  );

后端

    const express = require("express");
    const bodyParser = require('body-parser');
    const cors = require('cors');
    const fs = require('fs');

    const PORT = process.env.PORT || 5000;
    
    const app = express();
    app.use(cors());
    
    app.use(bodyParser.urlencoded( limit: '50mb', extended: true ))
    app.use(bodyParser.json( limit: '50mb' ))
    
    app.post("/uploaded_file", (req, res) => 
     let files = req.body;
    fs.writeFile(files.fileName, files.data, "base64", function (err) 
       if(err)
          res.send(err);
       else
          res.end("Uploaded");
      );
    );
    
    app.listen(PORT, () => 
      console.log(`Server listening on $PORT`);
    );

【讨论】：

嘿，@Pawan 我尝试实施您的建议，但对我没有用。你能分享一些例子吗？

嗨@VandanaMaurya我已经用代码编辑了我的答案，你可以试试这个。