向PrimeNG FileUpload数据传输添加其他信息

时间:2017-02-10 22:36:21

标签: angular primeng

我希望发送包含primeng fileupload组件上传文件的其他信息。基本上,我需要知道这些上传文件的相关内容。

我可以在" onBeforeSend"中添加标题。功能类似于授权代码,如下例所示。在哪里可以添加其他信息,例如' DocumentID':' A123'

onBeforeSend(event) {
    event.xhr.setRequestHeader("Authorization", 'Bearer ' + this.authService.getAccessToken());
} 

有人知道吗?

由于

2 个答案:

答案 0 :(得分:4)

onBeforeSend primeng fileupload控制事件中,有一个名为event.formData的对象,您可以使用此对象来自定义具有附加信息的请求。我能够在我正在进行的当前项目中成功实现此功能。

component.ts档案中:

    onBeforeSend(event) {
       event.xhr.setRequestHeader("Authorization", `Bearer ${this.authService.getToken()}`);
       event.formData.append('DocumentID', 'A123');
    }

template.html档案中:

    <p-fileUpload name="test[]" 
                  [url]="url_test" 
                  (onBeforeSend)="onBeforeSend($event)" 
                  accept="image/*" 
                  maxFileSize="5000000" 
                  withCredentials="true">

希望它有所帮助!!

答案 1 :(得分:0)

我将按照请求向实体发送文件,如下所示(有关更多信息,请参见this answer

我们可以使用FormData'application / json'在我们的the correct Content-Type内部的Blob中发送序列化为JSON的实体。有了这个,我们可以包括嵌套的对象,将字段添加到我们的实体中,而我们不必为每个新字段都更改Resource Controller方法签名-

curso-update.component.ts

private onBeforeSend(event) {
    const token = this.localStorage.retrieve('authenticationToken') || this.sessionStorage.retrieve('authenticationToken');
    if (!!token) {
        event.xhr.setRequestHeader('Authorization', `Bearer  ${token}`);
    }
    event.formData.append('curso', new Blob([JSON.stringify(this.curso)], { type: 'application/json' }));
}

相应地更改资源控制器

CursoResource.java

@PostMapping("/cursos/archivos")
@Timed
public ResponseEntity<Curso> createCurso(@Valid @RequestPart(value = "curso") Curso curso, 

@RequestPart("archivos[]")MultipartFile[] archivos) {
...
Curso result = this.cursoService.save(curso);
...
}