typescript - 如何在 Angular 7 的 ngx-dropzone-wrapper 中显示服务器上的现有文件

Question

我从事 Angular 7 项目，我使用 ngx-dropzone-wrapper 模块将图像上传到服务器 web api我可以毫无问题地上传图片但我会在更新模式下显示已上传的图片。

我的 Html 端代码

<dropzone class="dropzone-container" [config]="config" fxLayout="row" fxLayoutAlign="start strech"
            #nationalDropZone (success)="onUploadSuccess($event)" fxFlex="auto" (init)="nationalDropZoneInit($event)"
            [message]="'Please Add '"></dropzone>

  @ViewChild('nationalDropZone') componentRef?: DropzoneComponent;
  dropzone: any;

在这里初始化dropzone

  nationalDropZoneInit(arg: any): void {
  this.dropzone = this.componentRef.directiveRef.dropzone();
  }

我在这里读取用户信息，包括字符串 url 模板中的用户个人资料图片我从服务器返回的模型具有 profileImageUrl 属性，当在浏览器 url 上输入时可以看到图像。现在我将在 dropzone 上添加带有预览缩略图的现有图像

this.accountService.getResellerProfile().subscribe((res: ResellerInfoModel) => {
//Add res.profileImageUrl  to dropzone
//I do not know how
 });

Answer 1

希望这对您有所帮助。

const dropzone = this.componentRef.directiveRef.dropzone();

const mockFile = { name: "some name", size: "some size" };

dropzone.emit( "addedfile", mockFile );
dropzone.emit( "thumbnail", mockFile, res.profileImageUrl );
dropzone.emit( "complete", mockFile);

我从 this answer 得到了一些帮助.