POST http://localhost:3000/uploads 404（未找到）

Question

我正在尝试按照教程视频创建博客。

在上传图像的步骤中我收到错误。

我相信该错误是因为我在服务器配置中犯了一些错误，但我无法意识到它，因为我正在学习它。

所以我需要一些帮助..

服务器.js

typconst express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');

const app = express();

app.get(fileupload());

app.use(express.static(__dirname + 'public'));
app.use(express.static(__dirname + 'editor'));
app.use('/css',express.static(__dirname +'/css'));
app.use('/img',express.static(__dirname +'/img'));
app.use('/js',express.static(__dirname +'/js'));
app.use('/uploads',express.static(__dirname +'/uploads'));


app.use(fileupload());

app.get('/', (req, res) => {
    res.sendfile('./home.html');
})

app.get('/editor', (req, res) => {
    res.sendfile('./editor.html');
})

app.get('/uploads', (req, res) => {

    let file = req.file.image;
    let date = new Date();

    let imagename = date.getDate() + date.getTime() + fine.name;

    let path = 'public/uploads/' + imagename;

    file.mv(path,(err, result) => {
        if(err){
            throw err;
        } else {
            res.json(`uploads/${imagename}`)
        }
    })
})



app.listen("3000", () => {
    console.log('listening......');
})e here

编辑器.js

const blogTitleField = document.querySelector('.title');
const articleField = document.querySelector('.article');

//banner
const bannerImage = document.querySelector('#banner-upload');
const banner = document.querySelector(".banner")
let bannerPath;

const publishBtn = document.querySelector('.publish-btn');
const upLoadInput = document.querySelector("#image-upload");

bannerImage.addEventListener('change', () => {
    uploadImage(bannerImage, "banner");
})

const uploadImage = (uploadFile, uploadType ) => {
    const [file] = uploadFile.files;
    if(file && file.type.includes("image")) {
        const formdata = new FormData();
        formdata.append('image',file);

        fetch('/uploads', {
            method: 'post',
            body: formdata
        }).then(res => res.json())
        .then(data => {
            bannerPath = '${location.origin}/${data}';
            banner.style.backgroundImage = 'url("${bannerPath}")';
        })
    }
}

我试图根据这些例子更好地理解。

POST http://localhost:3000/404（未找到） https://www.twilio.com/en-us/blog/handle-file-uploads-node-express

Answer 1

您正在发出 POST 请求，但没有可用的路由器来容纳它。将指定为 GET 的路由器更改为 post。

app.post('/uploads', (req, res) => {
  // your codes goes here
})