Угловой 7.2.3, отправленные почтовые данные по «файлам».(В Express вспомните эти данные по "req.files") - PullRequest
Новая
       27

Угловой 7.2.3, отправленные почтовые данные по «файлам».(В Express вспомните эти данные по "req.files")

1 голос
/ 23 апреля 2019

My Express API REST поддерживает загрузку изображений.

Я использовал Postman для тестирования и получаю изображение по req.files, теперь в моем Angular-проекте изображение отправляется req.body по умолчанию.

Я попытался установить заголовок 'Content-type': 'multipart/form-data', установить наблюдение на files (получаю ошибку, потому что принимаю только 'тело'), установить 'Response-Type': 'blob' as 'json' и более редкие вещи.

Моя экспресс-функция: 

exports.newPhoto = function(req, res) {
   if(!req.files || !req.files.imageAvatar) { 
            return res.status(300).json({
                status: 'fail', data: 'The request must have imageAvatar file'
            }) 
        }
        imageAvatar = req.files.imageAvatar
        name = imageAvatar.md5 + path.extname(imageAvatar.name)
        ...
}

В угловом проекте: 

uploadImage(event) {
    /*upload-avatar.component.ts*/
    this.api.uploadPhoto(event.target.files[0]).subscribe(
    res => {
       ...
    }, err => {
      console.err(err);
    });
  }

/*api.service.ts*/
uploadPhoto(file: File) {
    const formData = new FormData();
    formData.append('imageAvatar', file, file.name);
    return this.http.post('http://localhost:3000/api/usuarios/imagen', formData);
  }

Я проверил много учебников и других тем на этой странице, и код всегда один и тот же.
Предположительно, Angular должен воспринимать его как multipart/form-data, но в заголовках запроса всегда отображается Content-Type: application/json

Вот несколько изображений, иллюстрирующих проблему:

Моя актуальная проблема: enter image description here

Я исключен: enter image description here

1 Ответ

0 голосов
/ 23 апреля 2019

Моя ошибка была установлена ​​по умолчанию заголовок в interceptor ??‍♂, потому что использование JWT в моем API и почти для всех запросов я должен был поставить 'Content-type': 'application/json' 

@Injectable()
export class JWTInterceptor implements HttpInterceptor {
  constructor(private authenticationService: AuthenticationService) {}

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

    const token = this.authenticationService.getToken();
    if (token) {
      req = req.clone({
        setHeaders: { Authorization: token }
      });
    }

    req = req.clone({
      setHeaders: {'Content-Type': 'application/json'}
    });

    return next.handle(req);
  }
}

Я оставляю это на случай, если кто-то случится так же.

...