Как удалить тип контента, установленный в перехватчиках HTTP для загрузки файла в angular4 - PullRequest
Новая
       7

Как удалить тип контента, установленный в перехватчиках HTTP для загрузки файла в angular4

0 голосов
/ 30 мая 2018

В моем приложении мы установили content-type = application/json в перехватчике.Но для загрузки файла тип содержимого должен быть multipart/form-data, то есть для загрузки данных формы потребуется contant-type = multipart/form-data.У меня вопрос, как я могу удалить тип содержимого, установленный в перехватчике при выполнении пост-запроса на загрузку файла.

спасибо, Harshavardhan

Ответы [ 3 ]

0 голосов
/ 30 октября 2018

У меня была похожая проблема, и я решил ее, вызвав toString () для тела, чтобы проверить, являются ли они данными формы.

Я уверен, что есть более чистый способ проверки типаобъект, но это работало достаточно хорошо для меня: 

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let ignore =
        typeof req.body === "undefined"
        || req.body === null
        || req.body.toString() === "[object FormData]" // <-- This solves your problem
        || req.headers.has("Content-Type");

    if (ignore) {
        return next.handle(req);
    }

    const cloned = req.clone({
        headers: req.headers.set("Content-Type", 'application/json')
    });
    return next.handle(cloned);
}

Обратите внимание, что я также игнорирую любые запросы, когда тип контента был указан вручную.

0 голосов
/ 23 июня 2019

Я использую серверную часть Node.JS, которая обычно принимает тип содержимого application/json.Для одной конечной точки требуется файл, который необходимо отправить через форму multipart/form-data.Этого можно достичь с помощью интерфейса FormData .

Поэтому перед отправкой данных из Angular на мой сервер я использовал интерфейс FormData: 

onSubmit() {
  // ... some logic before

  // Need to post multipart/form-data to our server, so let's create a FormData instance:
  const formData = new FormData();
  formData.append('icon', this.selectedIcon, this.selectedIcon.name); // the actual file
  formData.append('name', this.createGroupForm.get('name').value); // other data from a Angular reactive form

  // Send the FormData to the service
  this.groupService.post(formData).subscribe((group) => {
    console.log({
      group,
    });
  });
}

Теперь с Angular HttpInterceptor действительно легко определить, отправляете ли вы нормальные данные или FormData, и изменить заголовок content-type на основе экземпляра request.body: 

export class ExampleInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    /**
     * Let's assume that we need to set the contentType to application/json for every request.
     */
    let contentType = 'application/json';

    /**
     * But when the data of the body is an instance of FormData, we can assume that we are uploading an file.
     * Therefore, we need to change the contentType to multipart/form-data.
     */
    if (request.body instanceof FormData) {
      // we are sending a file here
      contentType = 'multipart/form-data';
    }

    const clonedRequest= request.clone({
      setHeaders: {
        'content-type': contentType, // set the content-type here
      },
    });

    return next.handle(clonedRequest);
  }
}
0 голосов
/ 30 мая 2018

Чтобы удалить существующий заголовок 

 if (!req.headers.has('Content-Type')) {
 req = req.clone({ headers: req.headers.delete('Content-Type','application/json') });

Добавление новых заголовков 

req = req.clone({ headers: req.headers.set('Content-Type', 'multipart/form-data')

Чтобы проверить текущее значение заголовка. 

req.headers.get('Accept')
...