我的React和Node应用程序位于不同的目录中,我要上传的是React中的图像,通过axios请求将其发送到后端,并在Node中接收到该图像,然后将其重命名为当前日期和时间,最后将其保存在当前后端目录,如果图像保存成功,则通过节点后端将其返回到前端并在react上显示该图像。
这就是我试图实现自己期望的目标的原因。
表格
<div className="form-group">
<label htmlFor="exampleFormControlFile1">
Example file input
</label>
<input
type="file"
className="form-control-file"
id="exampleFormControlFile1"
onChange={this.fileSelectedhandler}
/>
<button onClick = {this.onSubmit}> Upload</button>
</div>
点击提交时箭头功能调用
onSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append("file", this.state.file);
try {
const res = await axios.post("/upload", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
const { fileName, filePath, file } = res.data;
//setUploadedFile({ fileName, filePath });
//setMessage('File Uploaded');
console.log(fileName, filePath, file);
this.setState({ imagesHello : res.data});
} catch (err) {
if (err.response.status === 500) {
console.log("There was a problem with the server");
}
}
};
后端api
//route for uploading image(optional)
app.post("/upload", (req, res) => {
if (req.files === null) {
return res.status(200).json({ msg: "No File Uploaded" });
}
const file = req.files.file;
let ts = Date.now();
let date_ob = new Date(ts);
let date = date_ob.getDate();
let month = date_ob.getMonth() + 1;
let year = date_ob.getFullYear();
// prints date & time in YYYY-MM-DD format
const newFile = `${year} + "-" + ${month} + "-" + ${date}`;
file.mv(`${__dirname}/uploads/${file.name}`, (err) => {
if (err) {
console.log(err);
} else {
res.json({
fileName: file.name,
filePath: `/uploads/${file.name}`,
file: req.files.file,
});
}
});
});
此代码的问题是文件已保存到后端目录中,但现在不返回到前端,我想做的就是将保存的图像发回反应性朋友并显示它以响应上述{ {1}}发布请求。
任何帮助将不胜感激。
答案 0 :(得分:0)
如果你想在前端得到数据保存成功的消息.... 您可以从后端返回一些响应,并且在获取期间获取响应而没有错误,您可以对消息进行吐司(Materializecss Toast)
M.toast({html:"uploaded", classes:"#6a1b9a purple"})