PrimeNG 手动调用 FileUpload

Posted 2023-03-13

【中文标题】PrimeNG 手动调用 FileUpload

【英文标题】：PrimeNG manually invoke FileUpload

【发布时间】：2017-10-24 12:10:08

【问题描述】：

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

    ?????????????????

【参考方案1】：

适合我的示例代码

import FileUpload from 'primeng/primeng';

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

    startUpload()
        this.fileInput.upload();
    

Plunker Example

【讨论】：

如此简单，将fileInput:ElementRef 更改为fileInput:FileUpload 解决了这个问题。谢谢你..

它可以工作，但是最好通过 POST 提交一些其他参数

我无法完成这项工作。我在浏览器控制台中收到此消息：找不到模块：错误：无法解析 'primeng/primeng' in... 即使将路径更改为 'primeng/fileupload/fileupload' 也不起作用。请，任何帮助将不胜感激。我这样声明 viewchild：@ViewChild(FileUpload, static: false) btnUpload: FileUpload;

【参考方案2】：

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

将 customUpload 设置为 true。 为自定义上传设置您的 uploadHandler 在模板中设置局部变量#variable_name。 在 component.ts 中添加带有局部变量的 ViewChild 作为选择器

使用 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