PrimeNG 手动调用 FileUpload

Question

我想先 select 文件，然后通过另一个按钮而不是组件自己的 Upload 按钮开始上传这些文件。

我该怎么做？

我试过的示例代码：

<button pButton type="button" label="Start Upload"
        (click)="startUpload()"></button>

<p-fileUpload #fileInput name="fileIcon"
              url="rest/batch/file/multimedia/"></p-fileUpload>


@ViewChild('fileInput') fileInput:ElementRef;

constructor( private renderer: Renderer ) { }

startUpload(){

    // this.fileInput.upload(); -> doesn't compile, undefined
    // this.fileInput.nativeElement.upload(); -> this.fileInput.nativeElement is undefined

    ?????????????????
}

Answer 1

适用于我的示例代码

import {FileUpload} from 'primeng/primeng';

@Component({
  ...
})
export class AppComponent {
    @ViewChild('fileInput') fileInput: FileUpload;

    startUpload(){
        this.fileInput.upload();
    }
}

Plunker Example

Answer 2

如果可以，您应该使用内置按钮。要访问 class 变量和方法，您可以使用 ViewChild。你应该：

将 customUpload 设置为 true。
为自定义上传设置 uploadHandler
在模板中设置局部变量#variable_name。
在 component.ts

使用 FileUpload 类型向 component.ts 添加新变量（因此现在您可以访问变量和方法 - 在 VS Code 中，您可以单击右键并转到定义以查看所有内容）

@ViewChild('fileInput') fileInput:FileUpload;
// remember to import FileUpload and of course FileUploadModule

onSelect() {
  // here custom validation for file (for example check image's dimension)
}
customUpload(event) {
  // here you can set your custom upload
}

PrimeNG 手动调用 FileUpload

PrimeNG manually invoke FileUpload

typescript

primeng

angular