使用 multer 上传文件刷新 React 应用程序答案

【问题标题】：File upload with multer refreshes React app使用 multer 上传文件刷新 React 应用程序
【发布时间】：2018-08-23 03:46:03
【问题描述】：

更新

发生这种情况是因为 Creact React App 附带了热重载。相关问题： https://github.com/expressjs/multer/issues/566

https://github.com/facebook/create-react-app/issues/4095

我正在尝试学习使用 Nodejs、Express、Multer 和 React 进行前端文件上传。我实现了上传文件。我遇到了一个问题，并非总是如此，但大多数时候整个应用程序在上传后都会刷新。这是相关代码。

我的简单表格

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

handleFileChange 和 handleFormSubmit

handleFormSubmit = () => {
    const formData = new FormData();
    formData.append( "file", this.state.file );
    axios.post( "/api/upload", formData );
}

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

相关快递路线代码

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();
} );

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

【问题讨论】：

标签： node.js reactjs express multer

【解决方案1】：

这是第一个例子here。

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 ] } );
}

【讨论】：

谢谢。但正如我所说，我已经尝试过 e.preventDefault() 并且没有用。

【解决方案2】：

你正在使用

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

这就是为什么刷新

就这样吧

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

【讨论】：

谢谢。我正在使用 onSubmit 的形式处理这个问题。我试过你的建议，但我猜没有用。
尝试点击而不是点击
很奇怪。如果我使用表单进行输入，应用程序会刷新，但如果我在您使用时省略了表单，则不会。但是，归根结底，我想要一个表格并通过它管理提交。你知道是什么原因造成的吗？
这个跟react无关，跟html有关系，如果用commit类型，提交后页面刷新。单击按钮时需要发送数据，因此请使用 onClick
我已经按照您的建议使用 onClick 执行此操作。问题变得很奇怪，因为它现在没有形式刷新。并非总是如此，但有时会。我不知道是什么原因造成的。

【解决方案3】：

从 multer 中删除它

    destination( req, file, cb ) {
     cb( null, "client/public/images" );
    },

【讨论】：