如何在ngx-dropzone中对非图像文件使用自定义缩略图？Angular10+

npm install ngx-dropzone @angular/cdk

import { DropzoneConfigInterface } from 'ngx-dropzone';
import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

customThumbnail: SafeUrl;

constructor(private sanitizer: DomSanitizer) { }

ngOnInit() {
  const config: DropzoneConfigInterface = {
    // 其他配置项...
    thumbnailHeight: 150,
    thumbnailWidth: 150,
    createImageThumbnails: true,
    maxFiles: 1,
    accept: (file, done) => {
      if (file.type.startsWith('image/')) {
        // 处理图像文件的缩略图
        const reader = new FileReader();
        reader.onload = (event: any) => {
          this.customThumbnail = this.sanitizer.bypassSecurityTrustUrl(event.target.result);
        };
        reader.readAsDataURL(file);
      } else {
        // 处理非图像文件的缩略图
        this.customThumbnail = this.sanitizer.bypassSecurityTrustUrl('路径/到/自定义/缩略图');
      }
      done();
    }
  };
}

<ngx-dropzone [config]="config">
  <div class="dz-message">
    <div class="dz-message-text">拖放文件到此处或点击上传</div>
    <div class="dz-preview dz-file-preview">
      <div class="dz-details">
        <div class="dz-thumbnail">
          <img [src]="customThumbnail" alt="缩略图">
        </div>
        <div class="dz-filename"><span data-dz-name></span></div>
      </div>
    </div>
  </div>
</ngx-dropzone>