multer存储图像文件DiskStorage错误服务器错误

时间:2018-12-31 09:31:30

标签: angularjs typescript mean-stack multer

我有一个使用MEAN stack构建的博客应用程序,该应用程序一直运行良好。 我使用Multer node.js程序包添加了上传图片功能后就崩溃了。

这是我的文件夹结构:

enter image description here

我要存储图像的目录: \ 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

单击“保存帖子”按钮将在我的节点控制台中显示错误消息:

enter image description here

我可以坚持使用它,会有所帮助的!

0 个答案:

没有答案