想要从react UI上传zip文件夹，并将其发送到后端Node js服务器，在那里我可以将该文件夹放置在系统上的cerati

Question

前端这里我正试图从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;

Backend在这里，我想解压缩上传的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}`);
});

需要时，我得到data:application/x-zip-compressed;base64,UEsDBBQAA..........，我被困在这里。如何将缓冲的数据转换为原始形式？

我很感激你在这里的帮助。

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