MEAN стек - как добавить файл изображения в FormData из Express API? - PullRequest
Новая
       16

MEAN стек - как добавить файл изображения в FormData из Express API?

0 голосов
/ 31 октября 2019

В моем приложении стека MEAN я создаю маршрут API с Express из server.ts. Таким образом, компонент службы отправляет данные формы с изображением в API, а API отправляет данные на сервер через Axios. Вот мой код - 

  saveProduct(formDirective): void {
    let formData: FormData = new FormData();
    formData.append("name", formModel.nameFormControl as string);
    formData.append("price", formModel.priceFormControl as string);
    formData.append("currency", formModel.currencyFormControl as string);
    formData.append("url", formModel.urlFormControl as string);
    formData.append("description", formModel.descriptionFormControl as string);

    if (this.fileToUpload !== null) {
      formData.append("uploadFile", this.fileToUpload, this.fileToUpload.name);
    }

    let headers = new Headers();
    headers.append("Content-Type", "multipart/form-data");
    headers.append("Accept", "application/json");
    headers.append("Authorization", this.jwtToken);

    this.productsService.addProduct(formData, headers).subscribe(res => {.......});
  }

Вот метод обслуживания - 

addProduct(formData: FormData, headers: any): any {
   return this.http.post(environment.apiURL + '/admin/product/save', formData, headers)
      .map(res => res);
}

Express API

Я создалмаршрут API в Angular SSR (server.ts). Вот как маршрут API добавляется в файл server.ts - 

import { routes } from './api/routes';

...............

app.use('/api', routes);

...............

Структура файлов API имеет следующую иерархию - 

api---
   ---functions
      admin.functions.ts
   ---routes
      admin.routes.ts
   ---routes.ts

Вот мой файл routes.ts - 

import { Router } from 'express';

import AdminRoutes from './routes/admin.route';
export const routes = new Router();

// ADMIN ROUTES
routes.use('/admin', AdminRoutes);

export default routes;

Вот routes/admin.routes.ts код - 

import {
  Router,
} from 'express';
import * as multer from 'multer';

import AdminAPI from '../functions/admin.functions';

const routes = new Router();
export const upload = multer();

routes.route('/product/save').post(upload.single('uploadFile'), AdminAPI.saveProduct);

export default routes;

Вот functions/admin.functions.ts код - 

import axios from 'axios';
import * as FormData from 'form-data';
import * as fs from 'fs';

class AdminAPI {

    async saveProduct(req, res, next) {
        try {
            console.log('admin save bot', `${SERVER}/admin/product/save`);
            const formData = new FormData();
            formData.append('name', req.body.name);
            formData.append('price', req.body.price);
            formData.append('currency', req.body.currency);
            formData.append('url', req.body.url);
            formData.append('description', req.body.description);
            if(req.file){
              console.log('file', req.file);
              formData.append('uploadFile', fs.createReadStream(req.file));
            }
            const response = await axios.post(`${SERVER}/admin/product/save`, formData, {headers: req.headers});
            res.json(response.data);
        } catch (error) {
            next(error);
        }
    }
}

export default new AdminAPI();

В консоли я получаю следующую информацию о файле из кодаconsole.log('file', req.file) - 

file { fieldname: 'uploadFile',
  originalname: '17_5_WQM_127.png',
  encoding: '7bit',
  mimetype: 'image/png',
  buffer:
   <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 0f cb 00 00 03 be 08 02 00 00 00 b6 66 82 4d 00 00 00 01 73 52 47 42 00 ae ce 1c e9 00 00 00 04 ... >,
  size: 228600 }

Здесь formData.append('uploadFile', fs. createReadStream(req.file)); не может добавить файл к formData. Как я могу добавить req.file как File, как я добавил из моего Angular Component?

Заранее спасибо!

...