我看了https://docs.fineuploader.com/branch/master/features/modules.html
所以我完成了这些步骤：
- 通过fine uploader
npm install fine-uploader --save
- 添加到.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"
],
- 创建精美的上传器实例
/// <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>
答案 0 :(得分：5)
我已经通过以下方式在角度5中使用了精细上传器。
安装fine-uploader --save
从＆＃39; fine-uploader / lib / core / s3＆＃39;中导入{s3};
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);
}
}
});
<div class="btn" id="upload_image">Upload image</div>
<div class="image-preview-container">
<img id="preview-image" src="">
</div>