Угловой пост-запрос с многочастной формой имеет неправильный тип контента

Question

Я использую следующую функцию для загрузки файла на сервер с угловым значением HttpClient 7

  pushFileToStorage(productId, key, file: File): Observable<any> {
    let formdata: FormData = new FormData();

    formdata.append('prod', file);
    let url_ = '/admin5/api/v1/product/images/upload?';
    url_ += "productId=" + encodeURIComponent("" + productId) + "&";
    url_ += "kind=" + encodeURIComponent("" + key);

    return this.http.post(url_,formdata);
  }

У меня проблема в том, что HttpClient устанавливает неправильный заголовок типа контента (приложение/ json вместо «multipart / form-data»), и поэтому сервер не может прочитать файл.Это то, что я вижу в инструментах разработчика

Любая идея о том, что яя делаю неправильно?Спасибо

Answer 1

Это заголовок сервера, и сервер отвечает вам, используя json, и это абсолютно нормально.Проще и быстрее искать библиотеку для загрузки картинок вроде этого https://www.npmjs.com/package/angular-file-uploader или https://www.npmjs.com/package/angular-file

Answer 2

Я только что узнал, что в проекте, над которым я работаю, есть HttpInterceptor, который по умолчанию добавляет тип контента "application / json" к любому запросу, который не устанавливает тип контента.Так что это была проблема.

Он был добавлен в предыдущую версию (которая использовала угловой 2) и теперь должен быть удален

Answer 3

При использовании FormData вы не должны устанавливать Content-Type в multipart/form-data, в противном случае вы получите следующую ошибку:

Отсутствует ошибка границы типа содержимого

чтобы отправить файл с fromData, к вашим услугам:

   const headers = new Headers();
   headers.append("Accept", "application/json");
   const options = new RequestOptions({ headers: headers });

   const formData: FormData = new FormData();
   formData.append(key, value);   

   return this.http
     .post(`${this.baseUrl}/url`, formData, options)
     .map(this.extractData)
     .catch(this.handleError);

  private handleError(error: Response): Observable<any> {
    console.error("observable error: ", error);
    return Observable.throw(error.statusText);
  }

  private extractData(res: Response) {
    const body = res.json();
    return body || {};
  }

полный пример отправки файла с formData на сервер