node.js - axios发布后如何停止组件刷新。从formData上传图片后

Question

我正在构建一个博客构建器，我需要在其中上传图像，因为在 onChange 事件中选择了图像，并且上传图像的 url 需要在状态下更新。

发布图片上传请求后。组件会自动刷新，选定的文件和状态也会刷新。

如何阻止组件刷新和 setState 更新图像的正确 url..

handleChange = async (event) =>
{
    event.preventDefault();
    if(event.target.name == 'file')
    {


        var x=event.target.files[0]
        var y= event.target.name
        let formData = new FormData();
        formData.append('file',x)
        const response = await axios.post('http://localhost:8009/post/image',formData,{
           headers: {
             'Content-Type': 'multipart/form-data'
          }
        })
        let {data} = await response
        console.log(data)
        let file1 = data.name
        this.setState({
            content:{
                key:uuid(),
                name:y,
                file:file1,
                content:URL.createObjectURL(x)
            }
        })

   }
}

Image 的形式如下:

<input type="file" name="file" className="form-control-file"  onChange={this.handleChange} required/>

Node 上的后端:

router.post('/image',(req,res)=>
{
    console.log(req)

    let file = req.files.file;
    filename = Date.now() + '-' + file.name;

    file.mv(`./client/public/uploads/${filename}`, (err)=>{

        if(err) throw err;

    });
    console.log(`/uploads/${filename}`);
    res.json({name:`/uploads/${filename}`})
})

Answer 1

我看到您正在上传到本地环境。我在使用 Vue 时遇到了类似的问题，但后来偶然发现了 this answer @fanfare 指出，如果您使用任何类型的“热/实时刷新”(在 Vue 中称为热模块重新加载)并且文件正在上传到服务器监视更改的任何文件夹中，那么新文件被保存可能是刷新的原因。

在我的情况下，将文件保存在受监视文件夹之外解决了这个问题。