PhoneGap：使用 multipart/form-data 将文件上传到服务器答案

【问题标题】：PhoneGap: uploading file to server using multipart/form-dataPhoneGap：使用 multipart/form-data 将文件上传到服务器
【发布时间】：2013-08-01 09:52:05
【问题描述】：

在this 尚未回答的问题之后，我进行了一些测试以查看问题出在哪里 - 在我这边还是在服务器端。

所以考虑到这可能是图像编解码器的问题，我尝试使用 post 方法将text/plain 文件上传到我的服务器。

首先，我通过调用readAsText() 方法确保文件存在：

function onDeviceReady() {
   window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

      function gotFS(fileSystem) {
          fileSystem.root.getFile("textfile.txt", null, gotFileEntry, fail);
      }

      function gotFileEntry(fileEntry) {
          fileEntry.file(gotFile, fail);
      }

      function gotFile(file){
          readDataUrl(file);
          readAsText(file);
      }

      function readDataUrl(file) {
          var reader = new FileReader();
          reader.onloadend = function(evt) {
              alert("Read as data URL");
              alert(evt.target.result);
          };
          reader.readAsDataURL(file);
      }

      function readAsText(file) {
          var reader = new FileReader();
          reader.onloadend = function(evt) {
              alert("Read as text");
              alert(evt.target.result);
          };
          reader.readAsText(file);
      }

      function fail(evt) {
          alert(evt.target.error.code);
      }

在收到包含文本文件 URL 和文本文件内容的警报后，我知道这是我的文件。现在我正在上传它：

function gotFile(file){
          // alert('gotFile')
          // readDataUrl(file);
          // readAsText(file);
          alert(file.fullPath)
          uploadText(file.fullPath)
      }

function uploadText(fileURI) {
     alert('uploading file...')
      function win(r) {
        alert("Code = " + r.responseCode);
        alert("Response = " + r.response);
        alert("Sent = " + r.bytesSent);
    }

    function fail(error) {
        alert("An error has occurred: Code = " + error.code);
        alert("http_status = " + error.http_status);
        alert("upload error source " + error.source);
        alert("upload error target " + error.target);
    }

      var options = new FileUploadOptions();
      options.fileKey = "file";
      options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
      options.mimeType = "text/plain";

      var ft = new FileTransfer();
      ft.upload(fileURI, encodeURI("https://mysecureurl.com/?filename="+options.fileName), win, fail, options);
    }

我得到 fileTransfer 错误代码 1（找不到文件）和 http 状态代码 411（格式错误的请求）。

我拥有所有权限，包括我的 android 项目中的 fileTransfer 和 <access origin="*"/>。我的服务器管理员说他收到了请求，但是当我从 phonegap 发送文件时（与正常的浏览器请求不同），中间出现了问题，他不知道是什么。

我真的被困在这里了。有没有我不知道的 PhoneGap 限制？还是有什么办法可以捕获手机的 http body 请求以便我调试它？

【问题讨论】：

标签： javascript android upload cordova

【解决方案1】：

问题在于内容类型。 Phonegap 设置 Content-Type: multipart/form-data;boundary=+++++ 省略中间的空格。一些服务器可能对此很挑剔。我通过重写此标头并添加空格解决了这个问题，如下所示： Content-Type: multipart/form-data;边界=++++++。尽管这听起来像是 hack，并且为我解决了这个问题，但在未来的版本中，需要将此更改合并到 phonegap Android 库中。

【讨论】：

【解决方案2】：

这只是在 Android 平台上发生，在 iOS 上很好，所以尝试在 Android 上设置 options.chunkedMode=false（chunkedMode 选项默认为 true）。见https://github.com/apache/cordova-plugin-file-transfer/pull/141#issuecomment-291776345

【讨论】：