Multer для хранения файла образа DiskStorage Ошибка Ошибка сервера - PullRequest
0 голосов
/ 31 декабря 2018

У меня есть приложение для ведения блогов, созданное со стеком MEAN, приложение работает нормально все время.Он сломался после того, как я добавил функцию загрузки изображений с помощью пакета Multer node.js.

Это моя структура папок:

enter image description here

Каталоггде я хочу сохранить свое изображение: \ 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

Нажмите кнопку «Сохранить сообщение», чтобы получить сообщение об ошибке в консоли моего узла:

enter image description here

Я застряну на том, чтобы заставить его работать, буду признателен за некоторую помощь!

...