У меня есть приложение для ведения блогов, созданное со стеком MEAN, приложение работает нормально все время.Он сломался после того, как я добавил функцию загрузки изображений с помощью пакета Multer node.js.
Это моя структура папок:
Каталоггде я хочу сохранить свое изображение: \ server \ imgStore
Моя многопользовательская конфигурация:
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
Нажмите кнопку «Сохранить сообщение», чтобы получить сообщение об ошибке в консоли моего узла:
Я застряну на том, чтобы заставить его работать, буду признателен за некоторую помощь!