Question

我正在使用PrimeNG的FileUpload组件，这是我的需要：

要在与我的文件所在的请求相同的请求中发送两个整数值。

组件声明：

<p-fileUpload #fileInputFotos name="fotos[]" method="POST" [url]="urlUploadFotos" (onBeforeUpload)="onBeforeUploadFotos($event)" (onSelect)="onSelectFotos($event)" (onRemove)="removerFoto($event)" multiple="multiple" accept="image/*" maxFileSize="1500000" 
    chooseLabel="Anexar" [showUploadButton]="false" [showCancelButton]="false">

“。ts”文件中的相关代码：

onBeforeUploadFotos(event) {
    event.formData.append('idOS', this.idOSGerada);
    event.formData.append('idUser', this.userId);
}

请注意，提交按钮表单正在调用Upload方法。

表单声明标签

<form #ordemServicoForm="ngForm" autocomplete="off" (ngSubmit)="salvar(ordemServicoForm)" *ngIf="!osGerada">

“。ts”上的相关代码

salvar(form: FormControl) {
    if (this.isEditando) {
      this.atualizarOrdemServico(form);
    } else {
      this.adicionarOrdemServico(form);
    }
}

adicionarOrdemServico(form: FormControl) {
    this.ordemServicoService.salvar(this.ordemServico)
      .then((result) => {
        this.fileInputFotos.upload();
        this.fileInputAnexos.upload();
        form.reset();
      })
      .catch(erro => this.errorHandler.handle(erro));
}

API剩余资源

@PostMapping
public ResponseEntity<Object> salvar(@RequestBody MultipartFile multipartFile, HttpServletResponse response) {
    Foto fotos = new Foto();

    //TO BE IMPLEMENTED

    return ResponseEntity.status(HttpStatus.CREATED).body(new Object());
}

问题所在

在事件 onBeforeUpload 之后，什么都没有发生，没有错误，一切似乎都很好，我的对象已保存在API Rest中，但是资源没有被Upload调用。

版本

Angular CLI: 6.1.2
Node: 8.11.3
OS: win32 x64
Angular: 6.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.2
@angular-devkit/build-angular     0.7.2
@angular-devkit/build-optimizer   0.7.2
@angular-devkit/build-webpack     0.7.2
@angular-devkit/core              0.7.2
@angular-devkit/schematics        0.7.2
@angular/cli                      6.1.2
@ngtools/webpack                  6.1.2
@schematics/angular               0.7.2
@schematics/update                0.7.2
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.9.2

很难在这里重写完整的代码，甚至为此也很难创建一个代码。因此，如果某人不理解，请在标记此帖子为不完整或废话之前，对我说您的疑问。我想我的意图以及我如何处理项目中的组件都很清楚。

也许我走错了路，这变得至关重要。谢谢！

Answer 1

好吧，我什至解决了这个难题...

它缺少身份验证。

。

那是我的脸，可能是由于一天的疲倦，所以我没有在浏览器中看到它。

因此解决方案是在onBeforeSend上声明事件并设置 Authorization 方法。

HTML文件

<p-fileUpload #fileInputFotos method="POST" [url]="urlUploadFotos" (onBeforeUpload)="onBeforeUploadFotos($event)" 
    (onBeforeSend)="addAuthentication($event)" (onSelect)="onSelectFotos($event)" (onRemove)="removerFoto($event)" 
    multiple="multiple" accept="image/*" maxFileSize="1500000" chooseLabel="Anexar" [showUploadButton]="false" [showCancelButton]="false">
</p-fileUpload>

组件的类文件

addAuthentication(event) {
    event.xhr.setRequestHeader('Authorization', 'Basic ************************');
}

另外，

我必须在组件HTML声明中添加属性名称，以便API Rest能够识别它。

<p-fileUpload #fileInputFotos name="multipartFile"...

。

@PostMapping
public ResponseEntity<Object> salvar(@RequestBody MultipartFile multipartFile....

为什么在事件onBeforeUpload之后PrimeNG的FileUpload不调用服务器？

1 个答案: