此问题的解决方法是在Formly的模板选项中使用ng-file-upload插件,并在fileUpload中使用onSuccess和onError来设置上传文件的路径。下面是代码示例:
在Angular应用程序中安装ng-file-upload插件:
npm install ng-file-upload --save
在模块中导入ng-file-upload:
import { ngFileUploadModule } from 'ng-file-upload';
在Formly的模板选项中使用ng-file-upload插件:
import { Component } from '@angular/core';
import { FileUploader } from 'ng-file-upload';
@Component({
selector: 'my-app',
template: `
`,
})
export class AppComponent {
public uploader: FileUploader = new FileUploader({ url: 'uploadUrl' });
public fields = [
{
key: 'document',
type: 'file',
templateOptions: {
label: 'Select a file',
required: true,
type: 'file',
},
parser: (val) => this.uploader.queue[0]._file.name,
validators: {
fileCheck: {
expression: (control) => {
return !!control.value;
},
message: '$viewValue + " is not a valid file"',
},
},
},
];
public model = {};
public form = new FormGroup({});
}
在fileUpload中使用onSuccess和onError来设置上传文件的路径:
import { ngFileUploadModule } from 'ng-file-upload';
@Component({
selector: 'file-upload',
template: `
`,
providers: [ ng2UploaderService ]
})
export class FileUpload{
public uploader:FileUploader = new FileUploader({url:'http://localhost:10050/upload'});
public async uploadedPath: string;
constructor(protected ng2Uploader: ng2UploaderService) {
this.up