如何使用 Multer 從 Express 應用程序/Angular 表單中保存文件

Question

我創建了一個 API 以將上傳的圖像保存在服務器中，並在 postman 中成功運行。 在我的 Angular 前端表單中，似乎未發送圖像，而在路由器上傳圖像中，req.file 為空。 在 controller 中，我首先保存帖子並在保存圖像后（我想為上傳的文件設置一個名稱，帶有帖子 ID，但這是不可能的）你能幫我嗎？ 謝謝！

形式

  <form class="login-form" (submit)="formSubmit();" enctype="multipart/form-data">
                    <div class="col-md-3"></div>
                    <div class="col-md-6 ">
                        <div class="ec-alert bg-danger" *ngIf="formError">
                            {{ formError }}
                        </div>
                        <div class="form-group ">
                            <input id="title" class="form-control" placeholder="Titolo" type="text" name="username" [(ngModel)]="postTitle" required>
                        </div>
                        <div class="form-group ">
                            <textarea id="content" class="form-control" placeholder="Contenuto" name="content" [(ngModel)]="postContent" required></textarea>
                        </div>
            <div class="form-group ">
                            <input id="image" type="file" name="image" required (change)="onChange($event)">
                        </div>
                        <div class="form-group">
                            <input class="btn btn-primary btn-lg" value="Conferma" type="submit">
                        </div>
                    </div>
                </form>

CreatePostComponent.ts

public formSubmit() {
    this.formError = "";

    if(
        !this.postTitle ||
        !this.postContent
    ) {
        return this.formError = "Devi compilare entrambi i campi.";
    }

    if(!this.formError) {
        this.createPost();
    }

    return 0;
}

private createPost() {
    let requestObject = {
        method: "POST",
        location: "admin/create-post",
        body: {
            title: this.postTitle,
            content: this.postContent,
            image: this.postImage
        }
    }

    this.api.makeRequest(requestObject).then((val:any) => {
        if(val) {
    this.saveImage();

        }
    });
}

public onChange(event:any) {
    this.postImage = event.target.files[0];
}


public saveImage() {

    let requestObject = {
      method: "POST",
      location: "admin/upload-image",
      image: this.postImage
    }

    this.api.makeRequest(requestObject).then((val:any) => {
      console.log(val);
      if(val) {

      }
    });

  }

Router.js（快遞）

router.post('/create-post', ({body, payload}, res) {

    if(!body.content || !body.title) {
        return res.statusJson(400, { message: "I dati inviati con la richiesta sono insufficienti." });
    }
    const post = new Post();

    post.title = body.title;
    post.content = body.content;

    post.save((err) => {
        if(err) { return res.json({ err: err }); }
        return res.statusJson(201, { message: "Post creato." });
    });
});

router.post('/upload-image', upload.single('image'), (req, res) => {
    console.log(req.file);
  if (!req.file) {
    console.log("No file received");
    return res.send({
      success: false
    });

  } else {
    console.log('file received');
    return res.send({
      success: true
    })
  }
});

Answer 1

這似乎是一個 CORS 問題。 做一件事，將這些標頭添加到您的請求中，或者將這些標頭添加到您的攔截器中：對於單獨的請求：

    var myHeaders = new Headers();
    myHeaders.append("Access-Control-Allow-Headers": "*");
    myHeaders.append("Access-Control-Allow-Methods": "*");  // in case its a method issue

    let requestObject = {
      method: "POST",
      headers: myHeaders
      location: "admin/upload-image",
      image: this.postImage
    }

對於攔截器：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      request = request.clone({
          setHeaders: {
            'Access-Control-Allow-Origin': '*',
          }
        });
}

MDN 標頭： https://developer.mozilla.org/en-US/docs/Web/API/Request/headers