【发布时间】：2022-08-03 02:50:06
【问题描述】：
我正在尝试构建一个项目，申请人可以在其中上传他们的简历和图像，这些图像和简历将保存在本地服务器上，我正在制作两个输入组件来选择一个带有单个上传按钮的文件，从而向当我请求上传两个文件时，nodejs服务器端将文件保存在所需的目的地，只有第一个将被保存，而另一个将被忽略
这部分的我的客户端代码
import React from \'react\';
import axios from \'axios\';
import { useState, useEffect } from \"react\";
function FileUploads(props) {
const [file, setFile] = useState();
const [fileName, setFileName] = useState(\"\");
const [image, setImage] = useState();
const [imageName, setImageName] = useState(\"\");
const saveFile = (e) => {
setFile(e.target.files[0]);
setFileName(e.target.files[0].name);
console.log(e.target.files)
};
const saveImage = (e) => {
setImage(e.target.files[0]);
setImageName(e.target.files[0].name);
console.log(e.target.files)
};
const uploadFile = async (e) => {
console.log(file)
console.log(fileName)
console.log(image)
console.log(imageName)
const formData = new FormData();
formData.append(\"file\", file);
formData.append(\"fileName\", fileName);
const imageData = new FormData();
imageData.append(\"file\", image);
imageData.append(\"fileName\", imageName);
try {
const img = await axios.post(
\"http://localhost:5000/uploadImage\",imageData);
} catch (ex) {
console.log(ex);
}
try {
const img = await axios.post(
\"http://localhost:5000/uploadCV\",formData);
} catch (ex) {
console.log(ex);
}
};
return (
<body className=\"body\">
<div className=\"containerMinimized\" >
<div class=\"content\">
<h2>Kindly Upload Your CV & Image</h2>
<h4 className=\'input-cv-text\'>Upload your CV</h4>
<input className=\'input-cv\' type=\"file\" onChange={saveFile}/>
<h4 className=\'input-cv-text2\'>Upload your Image</h4>
<input className=\'input-cv\' type=\"file\" onChange={saveImage}/>
<button className=\"checkButtonInput\" onClick={uploadFile}>Upload</button>
</div>
</div>
</body>
);
}
export default FileUploads;
这是我使用 NodeJS 的端点
app.post(\"/uploadCV\", (req, res) => {
const newpath = __dirname + \"/applicantsResume/\";
const file = req.files.file;
const filename = file.name;
console.log(\'\')
file.mv(`${newpath}${filename}`, (err) => {
if (err) {
// res.status(500).send({ message: \"File upload failed\", code: 200 });
console.log(err)
}
// res.status(200).send({ message: \"File Uploaded\", code: 200 });
console.log(\'CV Uploaded Correctly\')
});
});
app.post(\"/uploadImage\", (req, res) => {
const newpath = __dirname + \"/applicantsImages/\";
const file = req.files.file;
const filename = file.name;
console.log(\'\')
file.mv(`${newpath}${filename}`, (err) => {
if (err) {
// res.status(500).send({ message: \"File upload failed\", code: 200 });
console.log(err)
}
// res.status(200).send({ message: \"File Uploaded\", code: 200 });
console.log(\'Image Uploaded Succesfully\')
});
});
我有时会发现一种模式，当我重新启动服务器时，它会自动插入丢失的文件，就好像它是一个待处理的请求一样
有任何想法吗？
标签： javascript node.js reactjs express axios