angular - 如何在 PrimeNG 的 FileUpload 组件中中止文件上传？

Question

一、总结

基于在 PrimeNG 的 FileUpload component 中选择的文件，我想中止文件上传到后端服务器的特定文件名模式。 Angular 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 组件中中止文件上传？

Answer 1

event.xhr.abort();
用于中止发送的请求。所以它不会在 onBeforeUpload 甚至 onBeforeSend 中工作。就是这样docs说:

The XMLHttpRequest.abort() method aborts the request if it has already been sent.

无论您做什么，它仍会发出请求，直到您指定 customUpload="true"( docs )
这就是你可以解决的方法:

指定自定义上传

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

在你的 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.
     }
   });
 }}

和功能进行实际调用

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