一、总结

基于PrimeNG中选择的文件文件上传组件 https://www.primefaces.org/primeng/#/fileupload，我想中止特定文件名模式的文件上传到后端服务器。角度 6.0.7、PrimeNG 6.0.2。

2. 第一种方法

2.1. HTML部分

<p-fileUpload #fileUploader name="file" url="{{uploadUrl}}" accept=".jpeg,jpg" 
  auto="auto" mode="basic" chooseLabel=„Upload file“
  (onBeforeUpload)="fileUploadOnBeforeUpload($event, fileUploader)">
</p-fileUpload>

2.2. TypeScript 部分

fileUploadOnBeforeUpload(event) {
  if (condition) {
    event.xhr.abort();
  }
}

2.3.结果

调用该方法没有任何错误，但上传并未取消。

3.第二种方法

3.1 TypeScript部分

fileUploadOnBeforeUpload(event, fileUploader: FileUpload) {
  if (condition) {
    for (let file of fileUploader.files) {
      const index = fileUploader.files.indexOf(file);
      fileUploader.remove(event, index);
    }
  }
}

3.2 结果

所选文件在传输前被删除，从而按预期“停止”上传。但是后端服务器抱怨浏览器控制台中的空请求是可以理解的：Failed to load resource: the server responded with a status of 400 ().

4. 待解决的挑战

选择特定文件后，如何中止 PrimeNG FileUpload 组件中的文件上传？

event.xhr.abort();

用于中止发送的请求。所以它在 onBeforeUpload 甚至 onBeforeSend 中不起作用。就是这样docs https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort say:

如果请求已经发送，XMLHttpRequest.abort() 方法将中止请求。

无论你做什么，它仍然会发出请求，直到你指定 customUpload="true" (docs https://www.primefaces.org/primeng/v6.1.7/#/fileupload)

这就是你可以解决它的方法：

1. 指定自定义上传

    <p-fileUpload #fileUpload customUpload = "true" (uploadHandler)="handleUpload($event)">
   

2. 在你的 component.ts 中处理它

    handleUpload(event: any) {
   
    // Do whatever you want here
   
    if(condition) {
      // Good to go!
      let formData = new FormData();
   
      for (let file of event.files) {
        formData.append('file', file, file.name);
      }
   
      this.sendFile(formData).toPromise().then((result: any) => {
        if(result.status == 200) { // Success
          // Your code: display a message, update list of files, etc.
        }
      });
    }}
   

3. 并进行实际调用的函数

   sendFile(formData) {
        // http is HttpClient. You can override it and add required authentication headers, etc.
        return this.http.post(this.HierarchyFileUploadUrl, formData);
    }