Angular 4. Как правильно передавать File в метод POST?

445
02 сентября 2017, 00:45

Нужно передать сам файл а не данные о файле

auth.service.ts

Принимаю объект с данными из компонента регистрации register.component.ts


registerUser(user) { 
  console.log(user);
  let headers = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({ headers: headers });
  return this.http.post(this.domain + 'authentication/register', 
  JSON.stringify(user), options).map(res => res.json());
}

console.log отображает все необходимые данные, в том числе с сам файл

{
  address: "124124124"
  avatar: File {name: "big_5ae4786f899b2c8bf63b3ee481f0daf2503e402b.jpg", 
  lastModified: 1503854933277, lastModifiedDate: Sun Aug 27 2017 20:28:53 
  GMT+0300 (RTZ 2 (зима)), webkitRelativePath: "", size: 436719, …}
  birthday: {day:"1",month:"January",year:"1967"}
  email: "denisod93@gmail.com"
  password: "kamekadZ227@"
  phone: "123123412"
  username: "Denis"
}  

Отправляем данные...

authentication.js(express.js routing) 

Принимаем данные...

router.post('/register', upload.any(), (req, res) => {
 console.log(req.body);
)};

Но теперь в теле запроса файл отсутствует.

{
  address: "124124124"
  avatar: {}
  birthday: {day:"1",month:"January",year:"1967"}
  email: "denisod93@gmail.com"
  password: "kamekadZ227@"
  phone: "123123412"
  username: "Denis"
} 

Что ни так я делаю в функции registerUser() и какие параметры необходимы для метода POST ?

Answer 1

Вопрос: Вы хотите данные о файле передать или сам файл?

JSON.Stringify конвертирует все в строку, в том числе и ваш Файл.

Если console.log выводит "объект" описания файла, то Stringify в большинстве браузеров выводят или пустую строку или в строку в духе [Object {}].

Если хотите передать именно файл, то есть два варианта:

  1. нужно отдельно передавать файл и JSON, как два отдельных параметра, через

    let formData: FormData = new FormData();
    formData.append('avatar', file, file.name);
    formData.append('user', user);
    return this.http.post(this.domain + 'authentication/register', formData, options)....
    
  2. Или загонять файл через base64

READ ALSO
Как отменить подавление ошибок в php

Как отменить подавление ошибок в php

Доброе время суток, на работе сегодня столкнулся с такой задачей есть некая платная CMS (если ее можно так назвать ) в которой гов

299
Blade - как экранировать @

Blade - как экранировать @

В blade знак @ зарезервирован, как его экранировать в шаблоне? Например я вставляю ссылку типа <script src="//unpkgcom/@textback/notification-widget@latest/build/index

268
Как отправить изменения на action со slug в Symfony 3?

Как отправить изменения на action со slug в Symfony 3?

Пытаюсь динамически генирировать форму с динамическим Action,

361