node.js - 如何将文件从 angular7 上传到 Node.js 服务器

Question

我的 Node.js 代码通过 Postman 可以 100% 正常工作， 但在 Angular 上，当我发送 FormData 时，服务器中没有发生任何事情，没有错误，但文件未上传。 我如何通过 Angular 上传文件？

HTML 组件:

<form>
  <input type="file" (change)="OnFileSelected($event)" name='photo'>
  <button type='submit' (click)="OnUpload()">Save Post</button>
</form>

Ts 组件:

OnFileSelected(event){
  this.SelectedFile = event.target.files[0] as File;
}
OnUpload(){
  const form: FormData = new FormData();
  form.append('photo', this.SelectedFile, this.SelectedFile.name);
  //Convert to Json because 'Unexpected token - in JSON at position 0 at JSON.parse' error in server
  let responseBody: {} = JSON.stringify(form);
  this.http.post(URL, responseBody).subscribe(event => { console.log(event)}, err => {console.log(err)
    });
  }

Node.js 服务器:

const path = require('path');
const express = require('express');
const multer = require('multer');
const bodyParser = require('body-parser')
const router = express.Router();
const DIR = './uploads';
let storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, DIR);
  },
  filename: (req, file, cb) => {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
  }
});
let upload = multer({ storage: storage });
router.use(bodyParser.json());
router.use(bodyParser.urlencoded({ extended: true }));
router.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
  res.setHeader('Access-Control-Allow-Methods', 'POST');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});
router.post('/upload-image', upload.single('photo'),  async function (req, res) {
  console.log(req.body);
  if (!req.file) {
    console.log("No file received");
    return res.send({
      success: false
    });
  } else { 
    console.log('file: ',req.file);
    return res.send({
      success: true
    })
  }
});

Answer 1

您需要指定您的请求是表单数据请求:

// Create Form Data
const formData: FormData = new FormData();
formData.append('photo', this.SelectedFile, this.SelectedFile.name);

// Create options for the request
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'multipart/form-data', //     <-- IMPORTANT
    'Accept': 'application/json'
  })
};

this.http.post(URL, formData, httpOptions).subscribe(...)