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

Question

一、总结

基于在 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. 打字稿部分

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

2.3. 结果

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

3. 第二种方法

3.1 打字稿部分

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 中不起作用。这就是文档所说的：

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

无论您做什么，它仍然会发出请求，直到您指定 customUpload="true" （文档）

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

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);
    }