Angular 4中点击按钮用Dropzone传图：processQueue函数无效

我来帮你搞定这个Dropzone上传的问题！你遇到的this.drpzone.processQueue is not a function错误，大概率是因为没有正确获取到Dropzone的原生实例，或者配置环节出了问题，下面给你一步步排查解决：

1. 先确认ViewChild的引用方式是否正确 #

从错误信息来看，你当前拿到的this.drpzone可能只是Angular封装的组件/指令对象，而非真正的Dropzone原生实例。如果你用的是angular2-dropzone-wrapper这类常用的Angular封装库，得通过组件的dropzone()方法去获取原生实例：

修改你的组件代码如下：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { DropzoneComponent, DropzoneConfigInterface } from 'angular2-dropzone-wrapper';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  @ViewChild(DropzoneComponent) drpzoneComponent: DropzoneComponent;
  private drpzoneInstance: any;

  // 组件视图初始化后再获取Dropzone实例
  ngAfterViewInit() {
    this.drpzoneInstance = this.drpzoneComponent.dropzone();
  }

  uploadFiles() {
    // 确认实例存在后再调用方法
    if (this.drpzoneInstance) {
      this.drpzoneInstance.processQueue();
    }
  }
}

2. 检查Dropzone配置是否开启手动上传 #

必须把autoProcessQueue设为false，否则Dropzone会自动上传文件，也就不需要手动调用processQueue()了，这也是常见的配置疏漏：

// 在组件中定义Dropzone配置
public dropzoneConfig: DropzoneConfigInterface = {
  url: '你的WebApi上传接口地址',
  autoProcessQueue: false, // 关键：关闭自动上传
  maxFilesize: 5, // 限制文件大小，单位MB
  acceptedFiles: 'image/*' // 只允许图片类型
};

3. 确认模板中的组件绑定正确 #

确保模板里的Dropzone组件正确绑定了你的配置，并且按钮点击事件关联到uploadFiles()方法：

<dropzone [config]="dropzoneConfig" class="dropzone"></dropzone>
<button (click)="uploadFiles()">开始上传图片</button>

4. 验证依赖安装与模块导入是否正确 #

如果你用的是第三方封装库，得确保已经正确安装并在AppModule中导入：

// app.module.ts
import { DropzoneModule } from 'angular2-dropzone-wrapper';
import { DROPZONE_CONFIG } from 'angular2-dropzone-wrapper';
import { DropzoneConfigInterface } from 'angular2-dropzone-wrapper';

// 可选：定义默认配置
const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
  url: '默认上传地址'
};

@NgModule({
  imports: [
    BrowserModule,
    DropzoneModule // 导入Dropzone模块
  ],
  providers: [
    {
      provide: DROPZONE_CONFIG,
      useValue: DEFAULT_DROPZONE_CONFIG
    }
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. 如果你用的是原生Dropzone（未用封装库） #

如果是直接引入原生Dropzone JS文件，需要手动初始化实例：

import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
// 声明Dropzone全局变量
declare var Dropzone: any;

@Component({
  selector: 'app-root',
  template: `
    <div #dropzoneContainer class="dropzone"></div>
    <button (click)="uploadFiles()">上传图片</button>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('dropzoneContainer') dropzoneEl: ElementRef;
  private drpzoneInstance: any;

  ngOnInit() {
    // 初始化原生Dropzone实例
    this.drpzoneInstance = new Dropzone(this.dropzoneEl.nativeElement, {
      url: '你的WebApi上传地址',
      autoProcessQueue: false
    });
  }

  uploadFiles() {
    this.drpzoneInstance.processQueue();
  }
}

按照上面的步骤排查，应该就能解决processQueue()调用失败的问题了！

内容的提问来源于stack exchange，提问作者Midhun P