通过表单提交（React，Express，Multer）防止文件上载重定向

小编典典

通过表单提交（React，Express，Multer）防止文件上载重定向

reactjs

我是第一次设置文件上传功能。我有一个反应前端和一个快递服务器，将存储文件。我已经设置好了，以便用户可以提交文件，并且按照我希望将其保存在快递服务器上的方式进行保存。但是，无论何时用户提交表单，他们都会从React前端（在端口3000上）重定向到服务器上的POST路由（端口3050）。我不知道这是帖子请求的默认行为，我希望这会使用户留在页面上。

我想避免这种行为，但不确定最好的解决方法。我尝试构建一个可充当AXIOS请求的操作，但是在访问AXIOS请求中的表单数据（尤其是文件数据）时遇到了麻烦。我的理解是AXIOS中没有对多部分表单数据的本地支持。

Event.preventdefault是显而易见的选择，但是任何实现都将阻止表单提交获取适当的表单数据并发送出去。

表单的代码包含在下面（此版本使用一个单击事件，该事件可以防止事件默认值并调度该操作-触发该操作，但如上所述，该操作不会传递任何相关信息）：

        <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路线：

app.post('/upload', upload.single('upl'), function(req,res,next) {
  return false
})

我的理解是，没有通过Axios发送多部分表单项的本机支持，我希望避免引入FormData模块以使其正常工作，因为表单（重定向以外的表单）可以完美地工作。这里是否有一个简单的解决方案，可以防止表单在仍提交表单数据的同时尝试加载服务器端页面？

阅读 314

2020-07-22

共1个答案

小编典典

在您的SubmitForm处理程序中，传递对该事件的引用并使用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(); } }>

2020-07-22