使用 FileReader 以角度将文件转换为 base64 字符串

Question

我正在使用 FileReader 将上传文件读取为 base64 字符串，并将它们存储在角度 11 的对象中的项目数组的字符串属性中。完成此过程后，我正在打印此对象，表明所有文件都是转换为base64字符串并成功放入对象。但是当我将此对象发布到 asp.net web api 时，它仅在 FileAsBase64 字符串属性中显示空字符串。所有其他值与发布的相同。请帮我解决这个问题。我的角度代码如下。

mapFormToItemBarcodeDTO(): any {
let _package = new PackageBarcodeDTO();
_package.WayBillNo = this.itemForm.get('wayBillNo')?.value;
_package.ItemBarcodes = new Array<ItemBarcodeDTO>();

this.thePackages.controls.forEach((element, index) => {
let itemBarcode = new ItemBarcodeDTO();

itemBarcode.ItemID = element.get('itemId')?.value;
itemBarcode.PackageID = element.get('packageId')?.value;

itemBarcode.Items = [];
let items = this.thePackages.at(index).get('items') as FormArray;
items.controls.forEach((element, index) => {
let item = new ItemDTO();
item.Barcode = element.get('barcode')?.value;
item.Weight = element.get('weight')?.value;
item.Size = element.get('size')?.value;
item.ItemStatusID = element.get('status')?.value;

this.uploadFiles.forEach(element => {

if (element.Index == index && element.ItemId == itemBarcode.ItemID) 
{
item.FileName = (String)(element.FileToUpload?.name);
item.FileType = (String)(element.FileToUpload?.type);

let reader = new FileReader();

// Setup onload event for reader
reader.onload = function (e) {
// Store base64 encoded representation of file
item.FileAsBase64 = (String)(e.target?.result);
}
// Read the file
reader.readAsDataURL(element.FileToUpload);

}
});
itemBarcode.Items.push(item);

});
_package.ItemBarcodes.push(itemBarcode);
});

console.log(_package)
return _package;
}

Answer 1

在 Angular 中将文件转换为 Base64

export class AppComponent  {
  base64Output : string;

  onFileSelected(event) {
    this.convertFile(event.target.files[0]).subscribe(base64 => {
      this.base64Output = base64;
    });
  }

  convertFile(file : File) : Observable<string> {
    const result = new ReplaySubject<string>(1);
    const reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = (event) => result.next(btoa(event.target.result.toString()));
    return result;
  }
}

https://tutorialsforangular.com/2020/12/17/converting-files-to-base64-in-angular/