Блог

Главная - Вопросы по программированию - Angular 7 публикует содержимое файла как составное / form-data

Angular 7 публикует содержимое файла как составное / form-data

#angular #httpclient #multipartform-data

#angular #httpclient #составная форма-данные

Вопрос:

У меня есть содержимое, которое я хочу опубликовать, доступное в строковой переменной. Я хочу использовать:

 import { HttpClient } from '@angular/common/http'

… для достижения того же эффекта, что и:

 curl -F "image=@blob.bin" someurl.com

… где содержимое моей строковой переменной будет тем, что может быть в локальном файле с именем `blob.bin. Я не уверен, как это сделать, но это не работает:

 this.http.post('http://someurl.com', fileContents)

Как вы получаете этот эффект, используя Angular 7 и службу HttpClient? У меня нет фактической HTML-формы, с которой я взаимодействую, у меня просто есть некоторый предписанный двоичный / строковый контент, который мне нужно опубликовать, как если бы он был отправлен формой, которая выглядит так (что совпадает с тем, что делает curl выше):

 <form method='POST' action='http://someurl.com' enctype='multipart/form-data'>
  <input type='file' name='update'>
  <input type='submit' value='Update'>
</form>

Я уверен, что это может быть достигнуто, просто возникли проблемы с выполнением правильных заклинаний.

Ответ №1:

Использовать FormData 

 const formData: FormData = new FormData();
formData.append('files', this.logo, this.logo.name);
this.http.post("upload", formData)

В примере this.logo это File объект. Вы можете получить объект file из своего ввода следующим образом:

 <input (change)="handleLogoFileInput($event.target.files)" type="file" name="update />

и в файле компонента:

 handleLogoFileInput(files: FileList) {
  this.logo = files[0];
}

Комментарии:

1. У меня нет <input>, у меня просто есть необработанная строка / двоичный файл… как мне преобразовать его в файловый объект для отправки в FormData.append?

2. Мой плохой, я неправильно понял. Вы могли бы использовать File​Reader​.read​AsBinary​String() для чтения вашего файла. После того, как вы приобретете файл, приведенный выше ответ должен сработать. developer.mozilla.org/en-US/docs/Web/API/FileReader /…

3. Является ли ваша необработанная строка массивом байтов в кодировке base64? Или я бы назвал это именем файла?

4. @Pace это даже не кодирование base64, просто прямое двоичное содержимое

5. @Sayegh я понял это… const formData: FormData = new FormData(); formData.append('image', new Blob([fileContents], { type: 'application/octet-stream' }), 'file.bin');

Метки: