如何从Angular NGX Dropzone中的图像中提取base64答案

【问题标题】：How to extract the base64 from an image in Angular NGX Dropzone如何从Angular NGX Dropzone中的图像中提取base64
【发布时间】：2021-09-20 02:25:41
【问题描述】：

大家好，我正在使用 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，这是我可以保存在数据库中的字符串。

这是脚本

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="">

我真正想做的就是从拖到那里的图像中提取base64信息到imageToShow中

我怎么知道 base64 是否可用？当我在其中拖动图像并在开发工具中检查它时，我可以看到 src="data:image/jpeg;base64,random stuff..."

希望我可以在这里放一些测试代码，但我需要 dropzone 库

【问题讨论】：

我找到了一个使用常规输入 type=file 的解决方案。我想这行得通。让它与 dropzone 一起工作会很好

标签： angularjs base64 dropzone.js

【解决方案1】：

看起来 ngx-dropzone 没有提供 bas64String 的道具。您可以使用 readAsDataURL 来获取 base64String。 readAsDataURL 用于读取 Blob 或 File 的内容。当加载端被触发时。那时，result 属性包含作为数据的数据：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);
  }

【讨论】：