Node.js 使用multer refreshes React应用程序上传文件

更新

const express = require( "express" );
const multer = require( "multer" );
const storage = multer.diskStorage( {
    destination( req, file, cb ) {
        cb( null, "client/public/images" );
    },
    filename( req, file, cb ) {
        cb( null, `${ Date.now() }-${ file.originalname }` );
    },
} );

const upload = multer( { storage } );

router.post( "/upload", upload.single( "file" ), ( req, res ) => {
    res.send();
} );

这是因为Creact React应用程序附带了热重新加载。 相关问题：

---

我正在尝试学习使用Nodejs、Express、Multer和React进行前端文件上传。我实现了上传文件。有一个问题，我挣扎，不总是，但大部分时间整个应用程序刷新后上传。这是相关代码

我的简单表格

<form onSubmit={this.handleFormSubmit}>
                <input
                    type="file"
                    id="file"
                    onChange={this.handleFileChange}
                />
            <button type="submit">Submit</button>
        </form>

相关快车路线代码

const express = require( "express" );
const multer = require( "multer" );
const storage = multer.diskStorage( {
    destination( req, file, cb ) {
        cb( null, "client/public/images" );
    },
    filename( req, file, cb ) {
        cb( null, `${ Date.now() }-${ file.originalname }` );
    },
} );

const upload = multer( { storage } );

router.post( "/upload", upload.single( "file" ), ( req, res ) => {
    res.send();
} );

我搜索了一下，但没有找到运气。我见过。在看到这一点之前，我已经尝试了event.preventDefault（）。此外，我还尝试了很多方法，比如直接使用onChange（）上传，而不设置状态，然后使用onSubmit（）处理。在简化代码（比如直接在handleFormSubmit中发布）之前，我试图通过Redux操作来实现这一点，但出于调试目的，我将其移到了这里。

您正在使用

<button type="submit">Submit</button>

提交

这就是为什么令人耳目一新

那么就这样做吧

<button onClick={this.handleFormSubmit}>Submit</button>

提交

这是第一个例子

handleFormSubmit=async（e）=>{
e、 preventDefault（）//{
this.setState（{file:e.target.files[0]}）；
}

谢谢。我正在onSubmit的表单中处理这个问题。我尝试过你的建议，但我猜不起作用。尝试一下onClick not onClick相当奇怪。如果我使用表单输入，应用程序会刷新，但如果我像你使用的那样省略表单，则不会。但是，在一天结束时，我想要一个表单，并通过它管理提交。你知道什么是c原因是什么？这与react无关，但与html有关，如果使用类型submit，则在提交后刷新页面。您需要在单击按钮时发送数据，所以使用onClick我已经按照您的建议使用onClick进行了此操作。问题变得奇怪，因为它现在刷新时没有表单。不总是这样，但有时确实如此。我没有任何线索是什么原因造成的。谢谢。但正如我所说的，我已经尝试了e.preventDefault（），但没有成功。

handleFormSubmit = async (e) => {
    e.preventDefault() // <-- missing this
    const formData = new FormData();
    formData.append( "file", this.state.file );
    const response = await axios.post( "/api/upload", formData );
}

handleFileChange = ( e ) => {
    this.setState( { file: e.target.files[ 0 ] } );
}