Загрузка изображения и настройка заголовков в Angular - PullRequest
Новая
       61

Загрузка изображения и настройка заголовков в Angular

0 голосов
/ 11 сентября 2018

У меня проблема с загрузкой изображения в Angular. Итак, я исследовал и нашел что-то, что вам нужно, чтобы удалить заголовки, чтобы автоматически отображался тип контента «граница». В моем угловом приложении у меня есть перехватчики, поэтому мне не нужно прикреплять заголовки в каждой функции. НО у меня проблема, так как я хочу удалить заголовки только в функции onCreateService (), чтобы я мог сохранить изображение. Пожалуйста, проверьте мои коды ниже. Я использую это на REST API и laravel.

Service.html 

onCreateService(form: FormGroup) {
    const formData = new FormData();
    formData.append('image', this.selectedImage);
    formData.append('name', this.servicesForm.get('name').value);
    formData.append('amount', this.servicesForm.get('price').value);
    formData.append('description', this.servicesForm.get('content').value);

        this.servicesService.addService(formData)
          .subscribe(
            data => {
              alert('New service created successfully');
              console.log(data);
            },
            error => {
              console.log(error);
              alert(`ERROR! can't create new service`);
            });
  }

Service.ts 

addService(formData) {
        const headers = new HttpHeaders();
        delete headers['Content-Type'];
        headers.append('Content-Type', 'multipart/form-data');
        return this.httpClient
          .post(
            this.url, (formData), { headers: headers }
          )
          .map((response: any) => {
            return response;
          });
      }

Interceptor.ts 

export class AuthInterceptor implements HttpInterceptor {
  private authService: AuthService;

  constructor(private injector: Injector, private router: Router) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // Get the auth header from the service.
    this.authService = this.injector.get(AuthService);
    const token = this.authService.getToken();

    if (token) {
      req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
    }

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

    req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
    return next.handle(req).do(
      (event: HttpEvent<any>) => { },
      (err: any) => {
        if (err instanceof HttpErrorResponse) {
          if (err.status === 401 || err.status === 403 || err.status === 400) {
            localStorage.clear();
            this.authService.logout();
            alert('Session has expired!\nYou will be redirected to the login page');
          }
        }
      }
    );
  }
}
...