通过表单提交(React，Express，Multer)防止文件上载重定向 [英] Prevent Redirect on File Upload through form Submittal (React, Express, Multer)
问题描述
我是第一次设置文件上传功能.我有一个React前端和一个Express服务器，它将存储文件.我已经设置好了，以便用户可以提交文件，并且按照我希望将其保存在快递服务器上的方式进行保存.但是，每当用户提交表单时，他们就会从react前端(在端口3000上)重定向到服务器上的POST路由(端口3050).我不知道这是发帖请求的默认行为，我希望该行为会使用户留在页面上.
I'm setting up a file uploading functionality for the first time. I have a react front-end and an express server that will store the files. I have it set up so a user can submit the file and it is saved the way I'd like it to be saved on the express server. However, whenever a user submits the form they are redirected from the react frontend (on port 3000) to the POST route on the server (port 3050). I didn't know that this was default behavior for a post request, which I expected would keep the users on the page.
我想避免这种行为，但是不确定最好的解决方法.我尝试构建一个可充当AXIOS请求的操作，但是在访问AXIOS请求中的表单数据(尤其是文件数据)时遇到了麻烦.我的理解是AXIOS中没有对多部分表单数据的本地支持.
I'd like to avoid this behavior but am unsure of the best way to go about it. I've tried building an action that functions as an AXIOS request, but am having trouble accessing the form data (particularly the file data) in the AXIOS request. My understanding is that there isn't native support for multipart form-data in AXIOS.
Event.preventdefault是显而易见的选择，但是任何实现都会阻止表单提交获取适当的表单数据并将其发送出去.
Event.preventdefault is the obvious choice, but any implementation of that stops the form submittal from grabbing the appropriate form data and sending it through.
下面包含表单的代码(此版本使用一个单击事件，该事件可以防止事件默认值并调度该操作-触发该操作，但如上所述，该操作不会传递任何相关信息):
The code for the form is included below (this version is using an on-click event that prevents the event default and dispatches the action - the action fires but as noted doesn't pass any of the relevant information through):
<div className="modal-wrapper">
<h3 className="title__h3">Upload Data</h3>
<p>Drag and drop anywhere or choose a file to upload.</p>
<p>.csv or .xlsx</p>
<form className="upload-form" ref="uploadForm" id="uploadForm" action="http://localhost:3050/upload" method="POST" enctype="multipart/form-data">
<input name="fileName" placeholder="Name the file you're uploading here"/>
<input type="file" name="upl" id="file" className="inputfile" />
<label htmlFor="file" className="btn btn__white-outline btn__full-width">Select a File</label>
<input onClick={this.submitForm} type="submit" value="submit" />
</form>
</div>;
我简单的Multer路线:
My simple Multer route:
app.post('/upload', upload.single('upl'), function(req,res,next) {
return false
})
我的理解是，不存在通过Axios发送多部分表单项的本机支持，我希望避免引入FormData模块以使其正常工作，因为表单(重定向以外的其他表单)都可以正常工作.这里是否有一个简单的解决方案，可以防止表单在仍提交表单数据的同时尝试加载服务器端页面?
My understanding is that there is no native support for sending a multipart-form item through Axios, I'd like to avoid pulling in a FormData module in order to make it work since the form (other than the redirect) works flawlessly. Is there a simple solution here that will prevent the form from trying to load the server-side page while still submitting the form data?
推荐答案
在您的SubmitForm处理程序中，传递对该事件的引用并使用event.preventDefault().
In your submitForm handler, pass a reference to the event and use event.preventDefault().
submitForm(event) {
event.preventDefault();
...other code here...
}
您也可以尝试
<form className="upload-form" ref="uploadForm" id="uploadForm" action="http://localhost:3050/upload" method="POST" enctype="multipart/form-data" onSubmit={ (event) => { event.preventDefault(); } }>
这篇关于通过表单提交(React，Express，Multer)防止文件上载重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
