Как получить загрузку файла из Angular Reactive Form?

#c# #asp.net #.net-core #angular7 #angular-reactive-forms

#c# #asp.net #.net-ядро #angular7 #angular-reactive-forms

Вопрос:

У меня есть модуль для загрузки файла в Angular 7 Reactive Forms (мне нужна реактивная форма, потому что мне нужно загрузить файлы и некоторую другую информацию вместе)

Я следую этой статье:https://medium.com/@amcdnl/file-uploads-with-angular-reactive-forms-960fd0b34cb5

следующий код:https://pastebin.com/qsbPiJEX

 onFileChange(event) {
    const reader = new FileReader();

    if(event.target.files amp;amp; event.target.files.length) {
      const [file] = event.target.files;
      reader.readAsDataURL(file);

      reader.onload = () => {
        this.formGroup.patchValue({
          file: reader.result
       });

        // need to run CD since file load runs outside of zone
        this.cd.markForCheck();
      };
    }
}

насколько я знаю, я получу файл в виде текста внутри данных json.
Но я понятия не имею, как получить это в виде файла или преобразовать данные json в файл. Файл может быть изображениями, pdf или другими документами (Excel, docs или другие форматы)

Я использую Dotnet Core 2.2 и Angular 7, Есть идеи, как получить файл?

Ответ №1:

У меня есть форма, в которой я хочу опубликовать изображение через FormData, я получил fileobject в моем FormControl, просто указав этот атрибут writeFile="true" . Это может записать объект FileList в вашем FormControl в качестве значения. Для достижения этого вам необходимо установить пакет «@rxweb/reactive-form-validators» и зарегистрировать модуль «RxReactiveFormsModule». Вот и все.

вот мой HTML-код :

 <form  [formGroup]="userFormGroup">       

        <label>Profile Photo</label>
        <input type="file" [writeFile]="true" formControlName="profilePhoto" multiple />        

      <button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
    </form>

Пожалуйста, обратитесь к этому примеру: Stackblitz

1. кажется, я должен использовать formdata для отправки файла. могу ли я отправить несколько файлов одновременно или мне нужно отправлять файл по одному? Мне также нужно отправить данные в reactiveform (json).

2. @nightingale2k1 Да, вы можете отправить несколько файлов на сервер, просто используя несколько атрибутов в file control, а что касается отправки данных в форме json, вы можете опубликовать их, но перед отправкой данных вы должны преобразовать их в строку filelist object base64. Я просто делюсь с вами информацией: строка Base64 не является рекомендуемым способом выполнения.

3. спасибо за ваш ответ. Должен ли я публиковать данные в FormData или я должен просто использовать json для данных (кроме файлов) и публиковать файлы после этого?

4. У меня это сработало. Несмотря на то, что я установил значение multiple равным false, мне пришлось захватить первый элемент, поскольку он передает массив.

5. Вам все еще нужно добавить файл к данным формы? Есть ли у вас какая-либо информация о методе контроллера на другом конце?

Ответ №2:

мы отправляем файл в запросе-тело запроса, чтобы мы могли получить файл в запросе, используя приведенный ниже код. Таким образом, мы можем получить доступ к файлу в нашем запросе, используя приведенный ниже код

 using System.IO;  
var filelocation = Path.GetTempFileName();
foreach (var FileData in Request.Form.Files)  
{ 
 if (FileData.Length > 0)  
  {  
    using (var inputStream = new FileStream(filelocation , FileMode.Create))  
    { 

          // read file to stream  
            await FileData.CopyToAsync(inputStream);  
             // stream to byte array  
              byte[] array = new byte[inputStream.Length];  
               inputStream.Seek(0, SeekOrigin.Begin);  

                inputStream.Read(array, 0, array.Length);  
     // get file name  
     string fName = formFile.FileName;  
  }

}
}