如何在上传文件（primeng）之前要求确认？答案

【问题标题】：How to ask a confirmation before uploading a file (primeng)?如何在上传文件（primeng）之前要求确认？
【发布时间】：2020-12-16 00:55:05
【问题描述】：

我试图在上传文件之前要求确认，以便服务器，目前我有这个 HTML 代码：

<p-fileUpload mode="basic" name="file" url="{{urlUpload}}" chooseLabel="Upload CSV (onBeforeSend)="onBeforeSend($event)">

然后，我有这个 TS 代码：

onBeforeSend (event): void {
  const token = this.service.getTokenSession();
  event.xhr.setRequestHeader('Authorization', 'Bearer ' + token);
  this.confirmationService.confirm({
    message: 'Are you sure to continue?',
    header : 'Confirmation',
    accept : () => {
      this.service.showLoader();
      this.onUpload(event);
    },
    reject: () => {}
  });
}

onUpload(event): void {
  this.msgsPage = [];
  try {
    const response = JSON.parse(event.xhr.response);
    console.log(response)
    if (!response.ok) {
      this.errorModalService.show('There was an error');
      this.flagResultLoadErrors = true;
      let c = 0;
      for (let msg of response.map.errors) {
        c++;
        this.msgsPage.push({
          detail  : msg,
          severity: 'error',
          summary : 'Error ' + c,
        });
      }
    }
  } catch (e) {
    this.errorModalService.show('Unknown error');
    console.log(e)
  } finally {
    this.service.hideLoader();
  }
}

有了这个，我试图阻止请求，但没有发生，我得到的是文件在确认对话框之前发送到服务器。另外，当我尝试获取 response 时，我遇到了这个错误：

SyntaxError: Unexpected end of JSON input

希望你能帮助我。

【问题讨论】：

确认服务好像有问题

标签： html angular typescript primeng

【解决方案1】：

您无法阻止该活动。它只是组件发出的一个事件。

https://github.com/primefaces/primeng/blob/master/src/app/components/fileupload/fileupload.ts#L367

您需要使用自定义的uploadHandler。

<p-fileUpload name="myfile[]" customUpload="true" (uploadHandler)="myUploader($event)"></p-fileUpload>

myUploader(event) {
    //event.files == files to upload
}

SyntaxError: Unexpected end of JSON input

这意味着您从 xhr 响应中获得的响应不是 JSON，但您正在尝试解析它。检查网络选项卡以查看服务器的响应是什么。

【讨论】：