发送到后端的问题?"/>
如何解决 axios 将 jpeg 而不是 jpg 发送到后端的问题?
所以我正在尝试将图像从反应前端发送到 node.js 后端,但是当我将 .jpg 发送到后端时,我问它是什么 tpye 说它是 jpeg,而 multer 仍然认为它一个 jpg 所以我在它上面做的尖锐的功能不再工作并给出错误,因为他们找不到文件。
我尝试在我需要文件类型的两个实例中使用(multer 保存它的地方和我声明 sharp 的输入的地方)但是那没有用。这是前端的代码:
function App() {
const [image, setImage] = useState("");
function handleImage(e) {
console.log(e.target.files);
setImage(e.target.files[0]);
}
function handleApi() {
const formData = new FormData();
formData.append("image", image);
formData.append("pfp", "yes");
formData.append("filetype", image.type )
console.log('hello')
console.log(image)
console.log(formData)
axios
.post("http://localhost:3001/users/editprofile/1", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((res) => {
console.log(res);
});
}
return (
<div>
<input type="file" name="file" onChange={handleImage} />
<button onClick={handleApi}>submit</button>
</div>
);
}`
这是后端代码:
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "images/temp");
},
filename: function (req, file, cb) {
const id = req.params.id;
let extention = path.extname(file.originalname);
cb(null, `pfp_${id}` + extention);
},
});
router.post("/editprofile/:id", upload.single("image"), async (req, res) => {
const id = req.params.id;
const { pfp, bio, filetype } = req.body;
console.log(bio);
console.log(req.body);
if (pfp) {
const typetemp = filetype.split("/");
const type = typetemp[typetemp.length - 1];
var imput = path.join(
__dirname,
"..",
"images/temp",
"pfp_" + id + "." + type
);
var output = path.join(__dirname, "..", "images/temp", id + "png.png");
var newimage = path.join(
__dirname,
"..",
"images/profile_pictures",
"pfp_" + id + ".png"
);
try {
const metadata = await sharp(imput).metadata();
if (metadata.format != "png") {
await sharp(imput).toFormat("png", { palette: true }).toFile(output);
} else {
await sharp(imput).toFile(output);
}
if (metadata.height > metadata.width) {
var topcut = Math.round((metadata.height - metadata.width) / 2);
await sharp(imput)
.extract({
width: metadata.width,
height: metadata.width,
left: 0,
top: topcut,
})
.toFile(newimage);
} else if (metadata.height < metadata.width) {
var leftcut = Math.round((metadata.width - metadata.height) / 2);
console.log(leftcut);
await sharp(imput)
.extract({
width: metadata.height,
height: metadata.height,
left: leftcut,
top: 0,
})
.toFile(newimage);
}
const metadatanew = await sharp(newimage).metadata();
console.log(metadatanew);
var newpfp = id + ".png";
} catch (error) {
console.log(error);
}
}
当我尝试上传 jpg 时,控制台出现以下错误:
[Object: null prototype] { pfp: 'yes', filetype: 'image/jpeg' }
[Error: Input file is missing: D:\programmeerstuff\javascript\pws\version 0.0.1\server\images\temp\pfp_1.jpeg]
这是我尝试上传的图片:(不要介意上面有什么,这只是我点击选择文件 XD 时看到的第一张图片)
回答如下:您遇到的问题与您尝试上传的图片的 MIME 类型有关。具体来说,图片的文件扩展名为
.jpg
,而其MIME类型为image/jpeg
。当您在后端处理图像时,您使用的是 MIME 类型 jpeg
而不是文件扩展名 .jpg
.
要解决此问题,一种可能的解决方案是避免在后端完全使用 MIME 类型,而是依赖文件扩展名。通过这种方式,您可以确保使用正确的文件类型,并且可以毫无问题地访问图像。
另外重要的是确保在发送图片到客户端时使用正确的MIME类型,以确保它在浏览器中正确显示。
更多推荐
如何解决 axios 将 jpeg 而不是 jpg 发送到后端的问题?
发布评论