首先,我有一个项目需要将图像发送到 AWS S3 存储桶 .. 所以我首先需要将图像从前端发送到后端,所以我使用 Axios 来做到这一点.. 但现在我需要将此代码复制到我的新应用程序中,因此我首先测试了我的旧应用程序并且它成功运行了..但是当我创建该新应用程序时,它向我显示了该错误。 enter image description here
听起来像我给错的路线,但我检查了很多次它根本没有错 这是我的前端代码
import { useState } from 'react'
import axios from 'axios'
async function postImage({image, description}) {
const formData = new FormData();
formData.append("image", image)
formData.append("description", description)
const result = await axios.post('/images', formData, { headers: {'Content-Type': 'multipart/form-data'}})
.catch(function (error) {
console.log(error);
});
return result.data
}
function Image() {
const [file, setFile] = useState()
const [description, setDescription] = useState("")
const [images, setImages] = useState([])
const submit = async event => {
event.preventDefault()
const result = await postImage({image: file, description})
setImages([result.image, ...images])
}
const fileSelected = event => {
const file = event.target.files[0]
setFile(file)
}
return (
<div className="App">
<form onSubmit={submit}>
<input onChange={fileSelected} type="file" accept="image/*"></input>
<input value={description} onChange={e => setDescription(e.target.value)} type="text"></input>
<button type="submit">Submit</button>
</form>
</div>
);
}
export default Image;
我发现的错误是
Error: Request failed with status code 404
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:62)
这是我的后端代码
const express = require("express");
const fs = require("fs");
const util = require("util");
// const unlinkFile = util.promisify(fs.unlink);
const path = require("path");
const multer = require("multer");
const upload = multer({ dest: "uploads/" });
// const { uploadFile, getFileStream } = require("./s3");
const app = express();
app.post('/images', upload.single('image'), async (req, res) => {
// const file = req.file
console.log(file)
})
const port = process.env.PORT || 5000;
app.listen(port);
console.log("App is listening on port " + port);