Как загрузить файл с angular7 на сервер Node.js

Question

Мой код node.js работает на 100% почтальоном, но в угловом режиме, когда я отправляю FormData и на сервере ничего не происходит, никаких ошибок, но файл не загружен.Как я могу загрузить файл по угловой?

Компонент 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

Вам необходимо сначала создать экземпляр вашего файла в OnInit (), прежде чем создавать экземпляр в функции OnUpload (), которую вы сделали:

            ngOnInit() {
this.form = new FormGroup({
  photo: new FormControl(null, {
    validators: [Validators.required]}) }

Вы можете удалить валидаторы, если хотите, вы также можете редактировать свою функцию onFileSelected () следующим образом:

this.SelectedFile = event.target.files[0] as File;   

this.form.patchValue({ photo: file });
this.form.get('photo').updateValueAndValidity();
const reader = new FileReader();
reader.readAsDataURL(file);
console.log(file);

вызовите вашу функцию так:

onUploadFile(event: Event){}

Answer 2

Существует много способов передачи файла на сервер, если это распространенный сценарий, тогда я предлагаю использовать угловую оболочку Dropzone.js.Лучше иметь пользовательский угловой компонент со всей пользовательской конфигурацией Dropzone, соответствующей вашим потребностям.

Использовать его также довольно просто: после установки пакета ввод файла так же прост:

<dropzone [config]="config" [message]="'Click or drag images here to upload'"

(error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>

Документацию можно найти здесь: https://www.npmjs.com/package/ngx-dropzone-wrapper

Answer 3

Вы должны указать, что ваш запрос является запросом данных формы:

// 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(...)