离子文件上传在REST客户端上起作用,但在设备上不起作用

时间:2020-07-10 07:57:12

标签: javascript angular ionic-framework file-upload image-upload

我一直在尝试实现捕获图像并通过ionic中的FormData上载。我尝试了很多事情,但无法上传文件。以下是REST客户端的请求标头文件上传的屏幕截图。enter image description here

下面是捕获和上传逻辑的离子代码段

      takePicture(event) {
        this.camera.getPicture(this.options).then((imageData) => {
          if (this.imageType === 'front') {
            this.imageDataFrontUrl = (window as any).Ionic.WebView.convertFileSrc(imageData);
          } else if (this.imageType === 'back') {
            this.imageDataBackUrl = (window as any).Ionic.WebView.convertFileSrc(imageData);
          }
          debugger;
          console.log(`imageData -> ${imageData}`);
          this.file.resolveLocalFilesystemUrl(imageData).then((entry: FileEntry) => {
            entry.file(file => {
              if (file.size >= 100000) {
                this.utils.showAlert('Error', 'File size exceeds 100kb');
              } else {         
                this.readFile(file);
              }
            });
          });
        }, (err) => {
          this.utils.showAlert('Error', 'Something went wrong');
        });
      }

  readFile(file: any) {
    const reader = new FileReader();
    reader.onloadend = () => {
      const imgBlob = new Blob([reader.result], {
        type: file.type
      });
      const formData = new FormData();
      formData.append('file', imgBlob, file.name);
      this.uploadFile(formData);
    };
    reader.readAsArrayBuffer(file);
  }

  uploadFile(file: FormData) {
    this.authService.fileUpload(file).subscribe(data => {
     console.log(data)
});

以上操作失败。

这是请求标头的样子:

------WebKitFormBoundarypAj335xQVljPadLR
Content-Disposition: form-data; name="file"; filename="Image.jpeg"
Content-Type: image/jpeg
------WebKitFormBoundarypAj335xQVljPadLR--

我还包括了**Content-type:multipart/form-data** in Request headers

Request fails with the response 
**Status Code:400 ModSecurity Action**

我的问题是为什么我无法在请求中发送文件数据,我在做什么错。谢谢。

0 个答案:

没有答案