使用 post 方法将数据传输到服务器而不更改节点中的 url。 js

Posted 2023-03-28

【中文标题】使用 post 方法将数据传输到服务器而不更改节点中的 url。 js

【英文标题】：using post method to transfer data to server without changing url in node. js

【发布时间】：2020-10-22 17:54:23

【问题描述】：

我现在正在开发一个实时聊天应用程序。我使用 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 方法将文件保存到数据库中。 或者有一些更好的解决方案可以代替？ 提前致谢！

【参考方案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,
    );
);