上传已存在的文件导致页面刷新

Question

我有个问题找了很久都找不到解决办法。它仅在上传已存在于上传文件夹中的文件（同名文件）时发生。如果我第一次上传文件，它工作正常。我正在使用 express-fileupload 包。

我用这段代码作为参考https://github.com/bradtraversy/react_file_uploader

在我添加文件上传之前，我的表单工作正常，首先我认为它的前端出了问题，我使用 React 并认为有一些状态正在改变并导致页面重新加载，但后来我使用了邮递员，它仍然会重新加载我的应用程序，无论我在哪个页面上，即使我注销并使用邮递员上传文件，它也会重新加载页面，但前提是文件已经上传。这不会发生在上面的代码中。

这是我的代码的样子

controller/upload.js

exports.upload_file = (req, res) => {

    if (req.files !== null) {

        const file = req.files.atest;
              
        file.mv(`${process.cwd()}/client/public/atesti/${file.name}`, err => {
            if (err) {
                return res.status(500).json({ ok: false, message: "Unos nije snimljen - greška kod atesta" });
            }

            res.status(200).json({ ok: true, message: "Atest je snimljen" });
        });
    } else return res.status(400).json({ ok: false, message: "Unos nije snimljen - fajl nije snimljen" });

}

routes/upload.js

const express = require('express');
const router = express.Router();
const uploadControlled = require('../controller/upload');
const routeAuth = require('../auth/auth');


router.post('/', routeAuth, uploadControlled.upload_file);


module.exports = router;

server.js

const express = require('express');
const cookieParser = require('cookie-parser');
const fileUpload = require('express-fileupload');

const app = express();
app.use(cookieParser());
app.use(fileUpload());

const PORT = process.env.PORT || 5000;

app.use(express.json());

//Stop CORS errors
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Authorization');
    if (req.method === 'OPTIONS') {
        res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET');
        return res.status(200).json({});
    }
    next();
});

const lagerListaRoute = require('./api/routes/items');
const korisniciRoute = require('./api/routes/users');
const refreshTokenRoute = require('./api/routes/refreshToken');
const seceneCeviRoute = require('./api/routes/seceneCevi');
const rezervacijeRoute = require('./api/routes/rezervacije');
const uploadRoute = require('./api/routes/upload');
const searchRoute = require('./api/routes/search');

app.use('/lagerlista', lagerListaRoute);
app.use('/users', korisniciRoute);
app.use('/refreshToken', refreshTokenRoute);
app.use('/seceneCevi', seceneCeviRoute);
app.use('/rezervacije', rezervacijeRoute);
app.use('/upload', uploadRoute);
app.use('/search', searchRoute);

app.use((req, res, next) => {
    const error = new Error('Not found');
    error.status = 404;
    next(error);
});

app.use((error, req, res, next) => {
    res.status(error.status || 500);
    res.json({
        error: {
            message: error.message
        }
    });
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

我尝试在 server.js 中添加所有内容，就像在示例代码中一样，没有将其拆分到控制器和路由文件夹中，也没有进行身份验证，但它仍然重新加载了页面。

如果有人想知道为什么我多次上传同一个文件，有时我需要更改上传的文件但保留相同的名称，并且在我的应用程序中文件连接到一个项目，有时文件共享给项目很少，所以当我需要将同一个文件与不同的项目连接时，我使用相同的文件上传。上传文件时，我使用它的位置并将其保存在数据库中。

Answer 1

经过几天的 bug 搜索，我找到了修复方法。看起来 react-scripts 有问题，我安装了 3.4.0 版，但是当我将它降级到 3.0.1 时，上传开始正常工作，3.1.0 版也可以正常工作。当我创建构建文件夹时上传正常，然后反应脚本的版本无关紧要。

上传已存在的文件导致页面刷新

Uploading file that already exists is causing page to refresh

javascript

file-upload

node.js

express

reactjs