Angular 11如何解析文件上传到javascript对象

Posted 2023-03-08

【中文标题】Angular 11如何解析文件上传到javascript对象

【英文标题】：Angular 11 how to parse file upload to a javascript object

【发布时间】：2022-01-17 21:43:28

【问题描述】：

我想选择一个 json 文件并将其解析为一个对象，然后再将其发送到 api 调用进行验证。下面的代码无法发送 formData。 api 需要一个对象。

<label class="form-label required" for="file">File</label>
<label
    class="button secondary wide required"
    for="file"
    (click)="inputFileTarget.click()"
>
    Select JSON file
</label>
<input
    id="inputFileTarget"
    #inputFileTarget
    type="file"
    class="hidden"
    accept=".json"
    formControlName="fileInput"
    (change)="onFileChange($event)"
/>

组件：

    const formData = new FormData();
    formData.append('file', this.importForm.get('fileSource').value);
    this.wizard.next();
    this.validateUploadedTemplate(formData);

private validateUploadedTemplate(formData: any): void 
    this.templateUploadService.validate(formData)
    .subscribe(result => 
        console.log('result', result);
    )




[HttpPost]
    [ResponseType(typeof(Boolean))]
    [Route("validate-definition", Name = "ValidateAuditTemplate")]
    [RequiredActivity(RadarModuleKeys.EnhancedAudits, EnhancedAuditActivities.ManageEnhancedAudits)]
    public async Task<IHttpActionResult> ValidateAuditTemplate(TemplateDefinition template)
    


        return Ok(await Task.FromResult(true));
    

【参考方案1】：

您不能像那样“读取”文件。 this.importForm.get('fileSource').value 将返回一个 FileList

interface FileList 
    readonly length: number;
    item(index: number): File | null;
    [index: number]: File;

即使您设置了<input multiple="false" />，您也会得到一个只有一项的 FileList。

如果您只想要一个项目，则从 FileList 中获取第一个项目并使用 FileReader 读取内容。

这是一个解释它的答案： Read a file and parse its content