Question

我想首先选择文件，然后通过另一个按钮而不是组件自己的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

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

将customUpload设置为true。
设置uploadHandler以进行自定义上传
在模板中设置局部变量#variable_name。
使用local.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

2 个答案: