我正在开发一个文件上传应用程序,但遇到了一个问题。提交上传文件时,我在控制台中收到 404 后错误。完整代码为 here。我假设文件上传组件存在问题,但似乎无法理解这里的问题。
文件上传.js
import React, { useState } from "react";
import axios from "axios";
export const FileUpload = () => {
const [file, setFile] = useState("");
const [filename, setFilename] = useState("Choose File");
const [uploadedFile, setUploadedFile] = useState({});
const onChange = (e) => {
setFile(e.target.files[0]);
setFilename(e.target.files[0].name);
};
const onSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append("file", file);
try {
const res = await axios.post("/upload", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
const { fileName, filePath } = res.data;
setUploadedFile({ filename, filePath });
} catch (err) {
if (err.response.status === 500) {
console.log("There was a problem with the server");
} else {
console.log(err.response.data.msg);
}
}
};
return (
<>
<form onSubmit={onSubmit}>
<div class="custom-file">
<input
type="file"
class="custom-file-input"
id="customFile"
onChange={onChange}
/>
<label class="custom-file-label" for="customFile">
{filename}
</label>
</div>
<input
type="submit"
value="Upload"
className="btn btn-primary btn-block mt-4"
/>
</form>
</>
);
};