如何解决加载资源失败:服务器响应状态为 500内部服务器错误当我尝试上传图像时发生此错误
我是 MEAN 开发的新手。我有两个输入字段和一个带有照片上传按钮的字段。虽然我设法在屏幕上显示上传的照片,但在服务器上上传时出现问题。有人可以帮忙吗?
我也收到此错误:
Error: ENOENT: no such file or directory,open 'C:\Something\Something\Something\Practice\finalappbackend\backedn\images\title-i-entered-1623300156286.jpeg'
这是我的后端代码:
app.js
const multer = require("multer");
const MIME_TYPE_MAP = {
"image/png": "png","image/jpeg": "jpeg","image/jpg": "jpg",};
const storage = multer.diskStorage({
destination: (req,file,cb) => {
const isValid = MIME_TYPE_MAP[file.mimetype];
let error = new Error("Invalid mime type");
if (isValid) {
error = null;
}
cb(error,"backedn/images");
},filename: (req,cb) => {
const name = file.originalname.toLowerCase().split(" ").join("-");
const ext = MIME_TYPE_MAP[file.mimetype];
cb(null,name + "-" + Date.Now() + "." + ext);
},});
app.post(
"/api/posts",multer({ storage: storage }).single("image"),(req,res,next) => {
const post = new Post({
title: req.body.title,content: req.body.content,});
console.log(post);
post.save().then((result) => {
res.status(201).json({
message: "Post added successfully",postId: result._id,});
});
}
);
这是我在前端的代码:
posts.service.ts
addPost(id: string,title: string,content: string,image: File) {
const postData = new FormData();
postData.append("title",title);
postData.append("content",content);
postData.append("image",image,title);
this.http
.post<{ message: string; postId: string }>(
'http://localhost:3000/api/posts',postData
)
.subscribe((responseData) => {
const post: Post = {id: responseData.postId,title: title,content: content}
this.posts.push(post);
this.postsUpdated.next([...this.posts]);
});
}
post-create.component.ts
imagePreview: string | ArrayBuffer;
onImagePicked(event: Event) {
const file = (event.target as HTMLInputElement).files[0];
this.form.patchValue({ image: file });
this.form.get('image').updateValueAndValidity();
const reader = new FileReader();
reader.onload = () => {
this.imagePreview = reader.result;
};
reader.readAsDataURL(file);
}
onSavePost() {
if (this.form.invalid) {
return;
}
if (this.mode === 'create') {
this.postsService.addPost(
this.form.value.id,this.form.value.title,this.form.value.content,this.form.value.image
);
} else {
this.postsService.updatePost(
this.postId,this.form.value.content
);
}
this.form.reset();
}
和 post-create.component.html
<div>
<button mat-stroked-button type="button" (click)="filePicker.click()">
Pick Image
</button>
<input type="file" #filePicker (change)="onImagePicked($event)" />
</div>
解决方法
解释
ENOENT 代表:错误无输入。如果您查看错误:
Error: ENOENT: no such file or directory,open 'C:\Something\Something\Something\Practice\finalappbackend\backedn\images\title-i-entered-1623300156286.jpeg'
意思是:我无法打开'...finalappbackend\backedn\images'
来保存图片,因为这个目录不存在。
注意:您负责在提供时创建目录 目的地作为函数。传递字符串时,multer 将使 确保为您创建了该目录。
行动
确保目录已经创建。名称中可能有错别字 backedn
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。