【发布时间】：2018-04-06 06:18:27
【问题描述】：
我正在使用 dropzone 在按钮单击事件上从 angular 4 应用程序将图像上传到 webApi。 mydrpzone.processQueue() 不工作。在上传按钮点击我得到这个错误 this.drpzone.processQueue is not a function.
这是我的代码
app.component.ts
import { Component, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DropzoneModule, DropzoneComponent, DropzoneDirective,
DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
@Component({
selector: 'my-app',
templateUrl: `./app.component.html`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
UsreName: string = "Midhun";
@ViewChild('drpzone') drpzone: DropzoneConfigInterface;
myFiles: string[] = [];
sMsg: string = '';
getFileDetails(e: any) {
//console.log (e.target.files);
for (var i = 0; i < e.target.files.length; i++) {
this.myFiles.push(e.target.files[i]);
}
}
onSending(data: any): void {
// data [ File , xhr, formData]
const file = data[0];
const formData = data[2];
formData.append('Name', "Midhun");
console.log("enetered");
}
uploadFiles() {
//this.drpzone.processQueue();
this.drpzone.processQueue();
console.log("uploading...");
}
onSendingmultiple() {
}
onError() {
}
onSuccess() {
}
//public type: string = 'component';
public type: string = 'directive';
public config: DropzoneConfigInterface = {
url: 'http://localhost:60945/api/fileupload/',
//url: 'http://localhost:60945/user/PostUserImage',
//url:'https://httpbin.org/post',
maxFiles: 5,
clickable: true,
acceptedFiles: 'image/*',
createImageThumbnails: true,
autoProcessQueue: false,
addRemoveLinks: true,
};
constructor() { }
}
app.component.html
<div class="text-center well">
<dropzone [config]="config" #drpzone
[message]="'Click or drag images here to upload'"
(error)="onError($event)"
(sending)="onSending($event)"
(sendingmultiple)="onSendingmultiple($event)"
(success)="onSuccess($event)">
</dropzone>
</div>
<br />
<button (click)="uploadFiles()">Upload</button>
如果有人知道如何解决它，请提供帮助。
【问题讨论】：
标签： angular dropzone.js