Question

我正在尝试使用typescript以角度2（或更确切地说是4）实现文件上传。

到目前为止，我已尝试使用ngx-uploader，即使用默认上传和自定义上传的primeNg上传器。

我可以设置所需的标题，文件类型，大小和文件名等文件信息可以添加到请求中。但是文件的实际数据很容易丢失。

这是我目前的代码：

用于primeNg上传者的HTML

 <p-fileUpload name="files" url="{{uploadUrl}}" multiple="multiple" maxFileSize="10000000"
  (onUpload)="uploadFinished($event)" withCredentials="true" (onBeforeSend)="addHeaders($event)"
                customUpload="true" (uploadHandler)="uploadHandling($event)">

  </p-fileUpload>

onUpload函数在成功的情况下做了一些事情（状态200），我得到了。在这一点上应该没关系。 onBeforeSend用于默认上传primeNg以添加标题，而不是使用uploadHandler上使用的自定义上传调用。 uploadUrl也正确设置。我的uploadHanding的代码如下：

uploadPrep(event: any) {
    // console.log(event.files);
    const fileList: FileList = event.files;
    if (fileList.length > 0) {
      const formData: FormData = new FormData();
      for (let i = 0; i < fileList.length; i++) {
        const file: File = fileList[0];
        formData.append('files', file, file.name);
      }
      console.log(formData);
      const headers = new Headers();
        headers.append('X-XSRF-TOKEN', document.cookie.substr(11, document.cookie.length - 11));
      const options = new RequestOptions({headers: headers});
      this.http.post(this.uploadUrl, formData, options)
        .map(res => res.json())
        .subscribe(
          data => console.log('success'),
          error => console.log(error)
        );
    }
  }

当我查看最终请求时，有效负载看起来像这样（对于txt文件的示例）：

------WebKitFormBoundaryUDTmTTvWLNAqcD65
Content-Disposition: form-data; name="files"; filename="testdata.txt"
Content-Type: text/plain


------WebKitFormBoundaryUDTmTTvWLNAqcD65--

该请求似乎也总是发送大约100-200B的数据，即使我附加了几MB的图片。

我查看了formData创建的event.files以及primeNg给我的Today's environment is following. (succeed to install) - bluemix version 0.5.6+5b886b4-2017-08-14T08:16:22+00:00 - logging-cli-win64_v1.0.13.exe the environment on which I failed to install - bluemix version 0.5.6+5b886b4-2017-08-14T08:16:22+00:00 - logging-cli-win64_v1.0.2.exe应该包含要上传的文件。文件信息（类型，名称等）始终存在但实际数据丢失，因为它位于上面显示的有效负载中。

此时我不知道问题是什么，因为我测试了几个选项似乎不是上传者本身的问题，如我的问题开头所述。

可能是什么问题或我该如何解决？

Answer 1

嗯，有点愚蠢的解决方案（至少让我感到愚蠢）。

首先，我意识到无论如何有效载荷都不会显示数据本身。

其次，错误本身就是后端只是在错误的位置查找数据。

在我的html中我设置了：

case "discharge":
                window.timeStart = new Date();
                console.log("---A---===>>>" + window.timeStart);

                window.onload = function () {
                    window.timeStop = new Date();
                    window.timedef = window.timeStop-window.timeStart
                    console.log("---B---===>>>" + window.timeStop);
                    console.log("---DIFF---===>>>" + window.timedef);
                };

                //that.showLoadingIndicator();

                if (App.getInstance().getConfig().activeConfiguration == configurations.MultiFlow) {
                    that.currentProcessHandler = new measurementDischargeHandler();
                    window.onload();
                }
                else {

                    that.currentProcessHandler = new dischargeHandler();
                }

而后端正在name="files"寻找数据。有点误传，但现在都解决了。这两个真的必须完全相同。

在Angular 2中上传文件，有效负载缺少文件数据

1 个答案: