如何在Angular NGX Dropzone中从图像中提取base64

Question

嘿，伙计们，我正在使用NGX Dropzone，当我将图像拖动到查看器中时，我注意到它在base64中，但当我尝试读取console.log(event.addedFiles);时，我没有使用base64值传递给我的信息。下面是我得到的一个例子

[File]
0: File
lastModified: 1625149167659
lastModifiedDate: Thu Jul 01 2021 10:19:27 GMT-0400 (Eastern Daylight Time) {}
name: "210534431_764639924207804_238792847075232344_n.jpeg"
size: 101133
type: "image/jpeg"
webkitRelativePath: ""
__proto__: File
length: 1
__proto__: Array(0)

我有另一段代码，我一直在使用它将URL转换为base64字符串。但这对我来说没用，因为URL也可以由任何地方的任何人共享和打开。然而，除非我将计算机中的本地映像转换为base64，否则它只能用于我，base64是一个可以保存在数据库中的字符串。

这是脚本

imageToShow: any;
onURLinserted() {
this.getImage(this.thumb.name).subscribe(data => {
this.createImageFromBlob(data);     
}, error => {
console.log("Error occured",error);
});
console.log("Data: ", this.thumb.name);
}
getImage(imageUrl: string): Observable<Blob> {
return this.http
.get<Blob>(imageUrl, { observe: 'body', responseType: 'blob' as 'json' })
}
createImageFromBlob(image: Blob) {
let reader = new FileReader(); //you need file reader for read blob data to base64 image data.
reader.addEventListener("load", () => {
this.imageToShow = reader.result; // here is the result you got from reader which I use to view the image
this.selectedRowData.photo = reader.result; // this is my ngModel read by my HTML input fields
}, false);
if (image) {
reader.readAsDataURL(image);
}
}
//In my HTML code
<img [src]="imageToShow" alt=""> 

我真正想做的就是从拖动到imageToShow的图像中提取base64信息，如果有帮助的话，可以使用这个代码或类似的东西，或者可能cdk拖放已经有了我不知道的道具

我怎么知道base64是可用的？当我在其中拖动一个图像，并在开发工具中检查它时，我可以看到src="；数据：图像/jpeg；base64，随机的东西">

希望我能在这里放一些测试代码，但我需要它的dropzone库

Answer 1

看起来ngx dropzone没有提供bas64String的道具。您可以使用readAsDataURL来获取base64String。readAsDataURL用于读取Blob或File的内容。当负载端被触发时。此时，result属性将数据包含为data:URL，该URL将文件的数据表示为base64编码的字符串。

以下代码对我有效。

html文件

<div class="custom-dropzone" ngx-dropzone [accept]="'image/jpeg,image/jpg,image/png,image/gif'"
(change)="onSelect($event)">
<ngx-dropzone-label>
<div>
<h2>Upload photo</h2>
</div>
</ngx-dropzone-label>
<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f"
[removable]="true" (removed)="onRemove(f)">
</ngx-dropzone-image-preview>
</div>

.ts文件

onSelect(event) {
this.files.push(...event.addedFiles);
if (this.files && this.files[0]) {
for (let i = 0; i < this.files.length; i++) {
this.fileToBase64(this.files[i])
.then(result=>{
const base64String = result.replace('data:', '')
.replace(/^.+,/, ''); // To remove data url part
this.postMultimedias.push({ name:this.files[i].name,content: 
base64String});//postMultimedias is a array which holds image name and bas64String
});         
}
}
}
fileToBase64 = (file:File):Promise<string> => {
return new Promise<string> ((resolve,reject)=> {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result.toString());
reader.onerror = error => reject(error);
})
}
onRemove(event) {
let position = this.files.indexOf(event);
this.postMultimedias.splice(position, 1);
this.files.splice(position, 1);
}