有一个小的表单,带有一个选择文件的输入和一个发送按钮
<form enctype="multipart/form-data">
<input type="file" id="fileInput" />
<button type="button" onclick="uploadFile()">Send</button>
</form>
函数相应地发送
function uploadFile() {
var input = document.getElementById("fileInput");
var file = input.files[0];
var formData = new FormData();
formData.append("file", file);
fetch("http://127.0.0.1:5000/api/fileupload", {
method: "POST",
body: formData,
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
if (response.ok) {
console.log(JSON.stringify(response));
}
})
.catch((error) => {
console.error( error);
});
}
存在用于处理请求的路由
const app = express();
const PORT = config.get("PORT");
app.use(fileUpload());
app.use(express.json());
app.use(cors());
// app.use("/api/auth", authRouter);
// app.use("/api/file", fileRouter);
app.use("/api/fileupload", (req, res) => {
if (req.files && req.files.hasOwnProperty("file")) {
const uploadedFile = req.files.file;
console.log(uploadedFile.name)
} else {
res.status(400).send("File not found.");
}
});
const start = async () => {
try {
await mongoose.connect(config.get("dbUrl"), {
useNewUrlParser: true,
useUnifiedTopology: true,
});
app.listen(PORT, () => {
console.log("port", PORT);
});
} catch (error) {}
};
start();
问题是文件是从客户端发送的,但是服务器没有接收到它。我用的是windows10 + vs代码
我已经看了很多实现发送文件的选项,我将代码简化到最简单,但它并没有解决问题。
1条答案
按热度按时间vlf7wbxs1#
请求无效,您需要从请求中删除
Content-Type
标头。试试这个:
参见:
警告:当使用FormData提交POST请求时,使用XMLHttpRequest或Fetch_API与multipart/form-data Content-Type(例如:将文件和Blob上载到服务器时),不要在请求上显式设置Content-Type标头。这样做将阻止浏览器使用边界表达式设置Content-Type标头,该边界表达式将用于分隔请求主体中的表单字段。
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
此外,在服务器上,您的检查应该会抛出错误,因此在这种情况下,您需要更改属性检查:
参见:hasOwnProperty is not a function in Node.js?
或者简单地说: