如何从 Angular Reactive Form 接收文件上传？答案

【问题标题】：How to receive file upload from Angular Reactive Form?如何从 Angular Reactive Form 接收文件上传？
【发布时间】：2019-08-12 22:57:40
【问题描述】：

我有在 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 && 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、文档或其他格式）

我正在使用 Dotnet Core 2.2 和 Angular 7 知道如何接收文件吗？

【问题讨论】：

请努力以一种清晰易读的方式格式化您的问题。

标签： c# asp.net .net-core angular7 angular-reactive-forms

【解决方案1】：

我有一个表单，我想通过 formData 在其中发布图像，我只需将这个属性 writeFile="true" 放在我的 FormControl 中就可以得到文件对象。这可以将您的 FormControl 中的 FileList 对象作为值写入。要实现这一点，您需要安装“@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

【讨论】：

看来我必须使用formdata来发送文件。我可以一次发送多个文件还是需要一个一个发送文件？我还需要以反应形式（json）发送数据。
@nightingale2k1 是的，您可以将多个文件发布到服务器，只需使用文件控制上的多个属性以及以 json 形式发布数据，您可以发布它，但在发布数据之前您必须对其进行转换文件列表对象 base64 字符串。我只是分享你的信息：Base64 字符串不是推荐的方式。
感谢您的回答。我应该在 formData 中发布数据还是应该只使用 json 作为数据（文件除外）然后再发布文件？
这对我有用。即使我将 multiple 设置为 false，我也必须抓住第一个元素，因为它传递了一个数组。
您还需要将文件附加到表单数据中吗？你有关于另一端控制器方法的任何信息吗？

【解决方案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;  
  }

}
}

【讨论】：