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

Question

我在 angular 7 项目上工作，我使用 ngx-dropzone-wrapper 模块将图像上传到服务器网络 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模板中的用户个人资料图片我的 return 来自服务器的模型有 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 那里得到了一些帮助。

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

How to display existing files on server in ngx-dropzone-wrapper on Angular 7

typescript

dropzone.js

angular7