使用 POST 方法将数据传输到服务器，而无需更改 Node.js 中的 URL

Question

我现在正在开发一个实时聊天应用程序。我使用node.js，ejs模板和Mysql数据库。 我想添加"传输文件"功能，这是我的客户端代码。

<form action="/upload" method="POST" enctype="multipart/form-data">
<input  id = "file" type="file" name="fliename">
<input  id="upload" type ="submit" value="Upload">
</form>

这是我的服务器端代码：

.post('/upload',(req,res)=>{if(req.files){console.log(req.files);}}

如果我使用 post 方法从客户端获取文件，那么 URL 将被更改，有什么方法可以避免 URL 更改吗？我只想用这个post方法将文件保存到数据库中。 或者有一些更好的解决方案可以代替？ 提前感谢！

Answer 1

您应该使用 prevent default 阻止默认表单行为，并使用 js fetch(( 发送表单数据而不更改 url。

const myForm = document.querySelector("form");
/*BLOCK FORM SUBMIT*/
myForm.addEventListener("submit", e => {
e.preventDefault();
return false;
/*Extract FILE and add it to FormData*/
const myFormFile = document.querySelector("input#file");
const file = myFormFile.target.files || myFormFile.dataTransfer.files
const formData = new FormData();
if (file.length > 0) {
formData.append("filename", file[0]);
}
/*Now once you've got the FormData, you dhould send it with fetch.*/
fetch('/post', {
method: "POST",
body: formData,
});
});