我有一个使用MEAN stack构建的博客应用程序,该应用程序一直运行良好。 我使用Multer node.js程序包添加了上传图片功能后就崩溃了。
这是我的文件夹结构:
我要存储图像的目录: \ server \ imgStore
我的multer配置是:
const express = require("express");
const multer = require("multer");
const Post = require("../models/post");
const router = express.Router();
const MIME_TYPE_MAP = {
'imgStore/png': 'png',
'imgStore/jpeg': 'jpg',
'imgStore/jpg': 'jpg'
}
const storage = multer.diskStorage({
destination: (req, file, cb) => {
// called when multer tries to save file
// request, file, callback
const isValid = MIME_TYPE_MAP[file.mimetype];
let error = new Error("Invalid mime type");
if (isValid) { // if its known extention set error to null
error = null;
}
console.log('before cb error line.');
cb(error, "server/imgStore"); // this path is relative to server.js not route.js
},
filename: (req,file,cb) => {
const name = file.originalname.toLowerCase().split(' ').join('-');//replace whitespace with dash
const ext = MIME_TYPE_MAP[file.mimetype];
cb(null, name + '-' + Date.now()+ '.' + ext)
}
});
html中的我的表单:
<form [formGroup]="form" (submit)="onSavePost(postForm)" #postForm="ngForm" *ngIf="!isLoading">
<!--create directive formGroup with the name of instance we created in ts file
in the input tag below, we removed name, instead we use formControlName
-->
<mat-card-title>{{mode}} your post here:</mat-card-title>
<mat-form-field floatLabel="never"> <!-- remove the float label-->
<input
matInput
type="text"
formControlName="title"
placeholder="Title"
>
<mat-error *ngIf="form.get('title').invalid">
<mat-error *ngIf="form.get('title').errors.required">
Title is required!
</mat-error>
<mat-error *ngIf="form.get('title').errors.minlength">
Title needs at least 4 characters !
</mat-error>
</mat-error>
</mat-form-field>
<mat-form-field floatLabel="never">
<textarea
matInput
rows="6"
formControlName="content"
placeholder="Content"
>
</textarea>
<mat-error *ngIf="form.get('content').invalid">
<div *ngIf="form.get('content').errors.required">
Cannot be empty!
</div>
</mat-error>
</mat-form-field>
<div class="img-loader">
<button (click)="filePicker.click()" mat-stroked-button type="button" color="primary">Upload Image</button>
<input type="file" #filePicker (change)="onImagePicked($event)"> <!--localRef is filePicker-->
</div>
<div class="image-preview" *ngIf="imagePreview!=='' && imagePreview && form.get('image').valid">
<img [src]="imagePreview" [alt]="form.value.title">
</div>
<div *ngIf="form.get('image').invalid" style="margin-bottom:20px;">
<mat-error *ngIf="imagePreview && form.get('image').errors.invalidMimeType">
Only files of [jpg, jpeg, png] are allowed to upload!
</mat-error>
</div>
<button
mat-raised-button
color="primary"
type="submit"
[disabled]="postForm.invalid">Save Post</button>
<!--I really prefer disable the submit button when its still invalid input!-->
</form>
点击“上传图片”按钮选择图片,然后选择可接受的图片类型:jpg,jpeg,png
单击“保存帖子”按钮将在我的节点控制台中显示错误消息:
我可以坚持使用它,会有所帮助的!