Question

我的项目采用以下（简化）结构：

-app
    -uploads
    -client
           - dropzone.js
    -server.js

我正在尝试使用dropzone js，Express JS和React JS上传文件。但是，每次我在dropzone框中删除文件时，都会在console.log：

中得到此信息

POST http://localhost:3000/uploads/ 404 (Not Found)

Not found
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /uploads/</pre>
</body>
</html>

./uploads文件夹的位置是正确的，我很困惑，为什么我无法从我的React组件向Express发出POST请求。任何帮助，将不胜感激！

React组件包含：

class Dropbox extends Component {
    constructor() {
        super();
        this.state = {
            selectedFile: [],
            description: ''
        }
    }

    onDrop = () => {
        const { selectedFile, description } = this.state;
        let formData = new FormData();
        let xhr = new XMLHttpRequest();

        formData.append('description', description);
        formData.append('selectedFile', selectedFile);

        xhr.open('POST', './uploads/', true);

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                console.log(xhr.responseText);
            } else {
                console.log(xhr.statusText);
            }
        }

        xhr.send(formData);
    }

    render() {
        const selectedFile = this.state;
        return (
            <div>
                <Dropzone onDrop={this.onDrop.bind(this)}>
                    <p>Drop PDF here</p>
                </Dropzone>
                <p>{this.state.selectedFile.map(f => <li>{f.name}</li>)}</p>
            </div>
        );
    }
}

我的server.js文件是：

const port = process.env.PORT || 5000;
const express = require('express');
const multer = require('multer');
const uuidv4 = require('uuid-v4');
const app = express();

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, './uploads/');
    },
    filename: (req, file, cb) => {
        const newFilename = `${uuidv4()}${path.extname(file.originalname)}`;
        cb(null, newFilename);
    }
});

const upload = multer({ storage });

app.post('/', upload.single('selectedFile'), (req, res) => {
    res.send();
})

app.listen(port, () => console.log(`Server listening on port ${port}`))

Answer 1

您尚未设置处理/上传的路线。您的POST操作将首先在/上传到您的服务器，并不关心它正在运行的系统的文件结构。您的服务器需要一条知道如何处理它的路由。

我认为您的意图是使用/路线进行上传，因此您有以下几种选择：

将您的路线更新为app.post('/uploads'...)
更新您的POST以点击/而不是/uploads

任何一方都应该解决这个问题。

将文件上传到Express JS时找不到./uploads文件夹

1 个答案: