如何接收来自 Angular Reactive Form 的文件上传？

Question

我在 Angular 7 Reactive Forms 中有上传文件的模块（我需要 reactive form 因为我需要一起上传文件和一些其他信息）

我关注这篇文章：https://medium.com/@amcdnl/file-uploads-with-angular-reactive-forms-960fd0b34cb5

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 知道如何接收文件吗？

Answer 1

我们正在请求的请求正文中发送文件，因此我们可以使用以下代码在请求中获取文件。所以我们可以使用下面的代码访问请求中的文件

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;  
  }

}
}

Answer 2

我有一个表单，我想在其中 post 通过 formData 进行图像处理，我只是通过放置此属性 writeFile="true" 在我的 FormControl 中获得了文件对象。这可以将 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

如何接收来自 Angular Reactive Form 的文件上传？

How to receive file upload from Angular Reactive Form?

c#

asp.net

.net-core

angular-reactive-forms

angular7