angular - 我们如何将 Fine-uploader 与 Angular 5 一起使用？

Question

我读到https://docs.fineuploader.com/branch/master/features/modules.html
所以我完成了这些步骤:

-通过npm installfine-uploader --save安装fine uploader

- 添加到 .angular-cli.json

"styles": [
    "../node_modules/fine-uploader/fine-uploader/fine-uploader-gallery.min.css"
],
"scripts": [
    "../node_modules/fine-uploader/fine-uploader/fine-uploader.min.js"
],

- 创建优秀的 uploader 实例

/// <reference types="fine-uploader" />
import { FineUploaderBasic } from 'fine-uploader/lib/core';
import { UIOptions } from 'fine-uploader';

private fineUploader: FineUploaderBasic;
private fineUploaderOptions: UIOptions;

ngOnInit() {      

  this.fineUploaderOptions = {
    validation: {
      allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
      sizeLimit: 50 * 1024 * 1024, // 50 KB
    },
    element: this.elementRef.nativeElement.querySelector('[fine-uploader]')
  };
  this.fineUploader = new FineUploaderBasic(this.fineUploaderOptions);
  this.fineUploader.setEndpoint('/api/User/UploadImage');
}

但是还没有起作用!无需登录浏览器控制台

我的组件完全:

/// <reference types="fine-uploader" />
import { Component, Inject, ElementRef } from '@angular/core';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA, MdInputModule, MdSlideToggleModule } from '@angular/material';
import { UserModel } from 'app/models/user-model';
import { FormGroup, FormBuilder, Validators, ValidatorFn, AbstractControl, FormControl } from '@angular/forms';
import { FineUploaderBasic } from 'fine-uploader/lib/core';
import { UIOptions } from 'fine-uploader';

@Component({
  selector: 'user-dialog',
  templateUrl: 'user-dialog.component.html',
  styleUrls: ['./user-dialog.component.css']
})
export class UserDialogComponent {
  constructor(public dialogRef: MdDialogRef<UserDialogComponent>,
    @Inject(MD_DIALOG_DATA) public data: any,
    private elementRef: ElementRef,
    private formBuilder: FormBuilder) {
    this.createForm();
  }

ngOnInit() {
  this.dialogRef.updateSize('80%', '80%');

  this.fineUploaderOptions = {
    validation: {
      allowedExtensions: ['jpg', 'jpeg', 'png', 'bpm', 'gif'],
      sizeLimit: 50 * 1024 * 1024, // 50 KB
    },
    element: this.elementRef.nativeElement.querySelector('[fine-uploader]')
  };
  this.fineUploader = new FineUploaderBasic(this.fineUploaderOptions);
  this.fineUploader.setEndpoint('/api/User/UploadImage');
}

  private fineUploader: FineUploaderBasic;
  private fineUploaderOptions: UIOptions;
  private model: UserModel = new UserModel();
  private userForm: FormGroup;

  private passwordMatchValidator() {
    if (!this.userForm) return null;
    if ((this.userForm.get('Id').value > 0 || this.userForm.get('PasswordChange')) &&
      this.userForm.get('Password').value !== this.userForm.get('PasswordConfirm').value)
      return { NotEqual: true };
  }

  createForm(): void {
    this.userForm = this.formBuilder.group({
      Id: [0, Validators.required],
      FullName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(50)]],
      Username: ['', Validators.required],
      Password: ['', [Validators.minLength(2)]],
      PasswordConfirm: ['', [this.passwordMatchValidator.bind(this)]],
      PasswordChange: false,
      Email: ['', [Validators.required, Validators.email]],
      IsAdmin: [false, Validators.required],
      LanguageId: [1, Validators.required],
      StatusId: [1, Validators.required],
      ImagePath: ''
    });
  }

  onSubmit() {

  }

  cancelButtonOnClick() {
    this.dialogRef.close();
  }
}

我的组件模板完整:

<div class="container" style="direction:rtl;">
  <h4>مشخصات ...</h4>
  <hr />
  <form [formGroup]="userForm" (ngSubmit)="onSubmit()" novalidate>
    <input type="hidden" formControlName="Id" />
    <div class="row">
      <div class="col-sm-6">
        <md-form-field>
          <input mdInput type="text" i18n-placeholder placeholder="نام نام خانوادگی" formControlName="FullName" />
        </md-form-field>
      </div>
      <div class="col-sm-6">
        <md-form-field>
          <input mdInput type="text" i18n-placeholder placeholder="نام کاربری" formControlName="Username" style="direction: ltr;" />
        </md-form-field>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <md-form-field>
          <input mdInput type="email" i18n-placeholder placeholder="پست الکترونیک" formControlName="Email" style="direction: ltr;"
          />
        </md-form-field>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <md-slide-toggle i18n formControlName="IsAdmin">کاربر مدیر است؟</md-slide-toggle>
      </div>
      <div class="col-sm-6" *ngIf="userForm.get('Id').value > 0">
        <md-slide-toggle i18n formControlName="PasswordChange">رمز عبور تغییر داده شود</md-slide-toggle>
      </div>
    </div>
    <div class="row" *ngIf="userForm.get('PasswordChange').value || userForm.get('Id').value <= 0">
      <div class="col-sm-6">
        <md-form-field>
          <input mdInput type="password" i18n-placeholder placeholder="رمز عبور" formControlName="Password" required style="direction: ltr;"
          />
        </md-form-field>
      </div>
      <div class="col-sm-6">
        <md-form-field>
          <input mdInput type="password" i18n-placeholder placeholder="تکرار رمز عبور" formControlName="PasswordConfirm" style="direction: ltr;"
          />
        </md-form-field>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <div fine-uploader>Uploader Container</div>
      </div>
    </div>
    <hr />
    <button md-button i18n type="submit" [disabled]="!userForm.valid">ثبت</button>
    <button md-button i18n type="button" (click)="cancelButtonOnClick()">انصراف</button>
  </form>
</div>

<script type="text/template" id="qq-template">
  <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
    <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
      <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
    </div>
    <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
      <span class="qq-upload-drop-area-text-selector"></span>
    </div>
    <div class="qq-upload-button-selector qq-upload-button">
      <div>Upload a file</div>
    </div>
    <span class="qq-drop-processing-selector qq-drop-processing">
              <span>Processing dropped files...</span>
    <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
    </span>
    <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
      <li>
        <div class="qq-progress-bar-container-selector">
          <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
        </div>
        <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
        <span class="qq-upload-file-selector qq-upload-file"></span>
        <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
        <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
        <span class="qq-upload-size-selector qq-upload-size"></span>
        <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
        <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
        <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
        <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
      </li>
    </ul>

    <dialog class="qq-alert-dialog-selector">
      <div class="qq-dialog-message-selector"></div>
      <div class="qq-dialog-buttons">
        <button type="button" class="qq-cancel-button-selector">Close</button>
      </div>
    </dialog>

    <dialog class="qq-confirm-dialog-selector">
      <div class="qq-dialog-message-selector"></div>
      <div class="qq-dialog-buttons">
        <button type="button" class="qq-cancel-button-selector">No</button>
        <button type="button" class="qq-ok-button-selector">Yes</button>
      </div>
    </dialog>

    <dialog class="qq-prompt-dialog-selector">
      <div class="qq-dialog-message-selector"></div>
      <input type="text">
      <div class="qq-dialog-buttons">
        <button type="button" class="qq-cancel-button-selector">Cancel</button>
        <button type="button" class="qq-ok-button-selector">Ok</button>
      </div>
    </dialog>
  </div>
</script>

Answer 1

我通过以下方式在 Angular 5 中使用了fine-uploader。

1. 通过 npm 安装fine-uploader:

install fine-uploader --save

在您的组件中导入 s3:

import { s3 } from 'fine-uploader/lib/core/s3';

现在使用任意变量名称在组件的构造函数中初始化 uploader:

public uploader: any;
    constructor() {
        const componentInstance = this;
        this.uploader = new s3.FineUploaderBasic({
          button: document.getElementById('upload_image'),
          debug: true,
          autoUpload: true,
          multiple: false,
          validation: {
            allowedExtensions: ['jpeg', 'jpg', 'png'],
            sizeLimit: 10000000 // 50 kB = 50 * 1024 bytes
          },
          iframeSupport: {
            localBlankPagePath: '/ui-kit.html'
          },
          cors: {
            expected: true,
            sendCredentials: true
          },
          objectProperties: {
            acl: 'public-read'
          },
          callbacks: {
            onSubmit: function (id, fileName) {
              componentInstance.isImageUploaded = true;
              const imgElement = document.getElementById('preview-image');
              this.drawThumbnail(id, imgElement, null, false);
              const file = this.getFile(id);              
              console.log(file);
            },
            onComplete: function (id, name, responseJSON, maybeXhr) {                    
            
            },
            onError: function (id, name, reason, maybeXhrOrXdr) {
              componentInstance.isImageUploaded = false;
              componentInstance._toastSearvice.pop('error', reason);
            }
          }
        });

最后，在 HTML 中添加一些 dom 元素。

<div class="btn" id="upload_image">Upload image</div>
 <div class="image-preview-container">
    <img id="preview-image" src="">   
</div>