Google Drive API 分段上传文件损坏，大小 1kb答案

【问题标题】：Google Drive API multipart upload gets file corrupted, size 1kbGoogle Drive API 分段上传文件损坏，大小 1kb
【发布时间】：2020-06-18 20:40:39
【问题描述】：

我一直在尝试使用 Google Drive API 上传文件，但我遇到了这个问题，我似乎找不到解决方案。上传图片时，它会上传一个大小为 1kb 且元数据正确的损坏文件，而在上传文本文件时，它会上传一个带有 [object file] 作为数据的文本文件，而不是文件的原始数据。

$("form").submit(function(evt){  
      evt.preventDefault();
      var formData = new FormData($(this)[0]);
      var control = document.getElementById("csv");
      var files = control.files;
      var dat=files[0];
   $.ajax({
       url: 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart',
         type: 'POST',
       contentType: false,
       data: "\n--foo_bar_baz\ \nContent-Type: application/json; charset=UTF-8\ \n\n{ 'name': '"+dat.name+"' }\ \n--foo_bar_baz\ \nContent-Type: "+dat.type+"\ \nContent-Transfer-Encoding: base64\ \n\n"+dat+"\ \n--foo_bar_baz--\ ",
       headers: {
            "Authorization":"Bearer <?php echo $result["access_token"]; ?>",
            "Content-Type": "multipart/related; boundary=foo_bar_baz",
            "Content-Length": formData.length
       },
       async: false,
       cache: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         var res = JSON.stringify(response);
        console.log("S: "+res);
       },
       error: function(response) {
        var res = JSON.stringify(response);
        console.log("E: "+res);
       }
   });
   return false;
 });

【问题讨论】：

您能否发布上传文件的代码，这似乎只是上传的元数据而不是文件本身..

标签： javascript ajax google-drive-api

【解决方案1】：

这个答案怎么样？请认为这只是几个可能的答案之一。

修改点：

您正在尝试将文件上传为 base64。但在您的脚本中，dat 不是 base64。
- 在这种情况下，我使用了FileReader。
请删除"\n--foo_bar_baz\ \nContent-Type: application/json; charset=UTF-8\ \n\n{ 'name': '"+dat.name+"' }\ \n--foo_bar_baz\ \nContent-Type: "+dat.type+"\ \nContent-Transfer-Encoding: base64\ \n\n"+dat+"\ \n--foo_bar_baz--\ ", 中的\ \n 中的\。

当以上几点反映到你的脚本中时，它变成如下。

修改脚本：

$("form").submit(function(evt){  
  evt.preventDefault();
  var formData = new FormData($(this)[0]);
  var control = document.getElementById("csv");
  var files = control.files;
  var dat = files[0];

  var f = new FileReader();  // Added
  f.onload = function(){  // Added
    const base64Data = this.result.split(",")[1];  // Added
    $.ajax({
      url: 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart',
      type: 'POST',
      contentType: false,
      data: "\n--foo_bar_baz\nContent-Type: application/json; charset=UTF-8\n\n{'name': '"+dat.name+"'}\n--foo_bar_baz\nContent-Type: "+dat.type+"\nContent-Transfer-Encoding: base64\n\n"+base64Data+"\n--foo_bar_baz--\n",  // Modified
      headers: {
        "Authorization": "Bearer <?php echo $result["access_token"]; ?>",
        "Content-Type": "multipart/related; boundary=foo_bar_baz",
        "Content-Length": formData.length
      },
      async: false,
      cache: false,
      enctype: 'multipart/form-data',
      processData: false,
      success: function (response) {
        var res = JSON.stringify(response);
        console.log("S: "+res);
      },
      error: function(response) {
        var res = JSON.stringify(response);
        console.log("E: "+res);
      }
    });
  }
  f.readAsDataURL(dat);  // Added
  return false;
});

注意：

使用uploadType=multipart 时，最大文件大小为5 MB。请注意这一点。 Ref

如果这不是您问题的直接解决方案，我深表歉意。

【讨论】：