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

Question

我有一个问题，我很长时间找不到解决方案。 仅在上传已在上传文件夹中的文件（同名文件）时才会发生这种情况。 如果我第一次上传文件，它工作正常。 我正在使用 express-fileupload package。

我将此代码用作参考https://github.com/bradtraversy/react_file_uploader

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

这就是我的代码的样子

控制器/上传.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" });

}

路线/上传.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;

服务器.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 中添加所有内容，就像在示例代码中一样，没有在 controller 和路由文件夹中拆分它并且没有身份验证，但它仍然重新加载了页面。

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

Answer 1

经过几天的错误搜索，我找到了解决方法。 看起来 react-scripts 有问题，我安装了 3.4.0 版本，但是当我将其降级到 3.0.1 时，上传开始正常工作，3.1.0 版本也可以正常工作。 当我创建一个构建文件夹时，上传工作正常，那么 react-scripts 的版本无关紧要。