如何使用uploadType=resumable将文件上传到google drive api

Question

我尝试按照可恢复上传类型的参数上传文件，状态为 200（正常），但文件未上传。

• 状态视图

GENERAL Request URL: https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable Request Method: POST Status Code: 200 Remote Address: Referrer Policy: no-referrer-when-downgrade

参考： https : //developers.google.com/drive/api/v3/manage-uploads#resumable

- 这是我的代码结构，我将不胜感激

 $.ajax({ type: "POST", beforeSend: function(request) { request.setRequestHeader("Authorization", "Bearer" + " " + localStorage.getItem("accessToken")); request.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); }, url: "https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable", success: function (data) { console.log(data); }, error: function (error) { console.log(error); }, async: true, data: JSON.stringify({mimeType: "image/png", name: "sample" }), cache: false, processData: false, timeout: 60000 });

Answer 1

我相信你的目标和情况如下。

• 您想使用 ajax 使用可恢复上传上传文件。
• 您的访问令牌可用于将文件上传到 Google Drive。
• 您已经可以使用 Drive API。

改装要点：

• 为了实现可续传上传，需要做如下流程。

  1. 为可恢复上传创建会话。
     • 通过这种方式，可以从作为端点的响应头中检索位置。 这用于上传数据。
  2. 使用检索到的端点上传数据。

• 在您的脚本中，可以创建会话。 但是，不幸的是，位置不是从响应头中检索到的。 我认为这就是你的问题的原因。 在这种情况下，作为下一步，需要使用该位置上传文件。

• 在您的脚本中，未显示文件内容。 因此，在此答案中，作为示例，我将文件输入和按钮标签添加为 HTML。

修改后的脚本：

<input type="file" id="file">
<input type="button" value="upload" onclick="resumableUpload()">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>

const getData = (file) =>
  new Promise((resolve, reject) => {
    if (file) {
      const fr = new FileReader();
      fr.onload = f => resolve({filename: file.name, mimeType: file.type, fileSize: file.size, data: f.target.result});
      fr.onerror = err => reject(err);
      fr.readAsArrayBuffer(file);
    } else {
      resolve({});
    }
  });

async function resumableUpload() {
  const accessToken = localStorage.getItem("accessToken");
  const file = document.getElementById("file").files[0];
  const fileObj = await getData(file);
  if (Object.keys(fileObj).length == 0) {
    console.log("No file.");
    return;
  }

  // 1. Create the session for the resumable upload..
  const metadata = {mimeType: fileObj.mimeType, name: fileObj.filename};
  $.ajax({
      type: "POST",
      beforeSend: function(request) {
        request.setRequestHeader("Authorization", "Bearer" + " " + accessToken);
        request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
      },
      url: "https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable",
      success: function (data, _, r) {
        const location = r.getResponseHeader("location");

        // 2. Upload the data using the retrieved endpoint.
        $.ajax({
          type: "PUT",
          beforeSend: function(request) {
            request.setRequestHeader("Content-Range", `bytes 0-${fileObj.fileSize - 1}\/${fileObj.fileSize}`);
          },
          url: location,
          success: function (data) {
            console.log(data)
          },
          error: function (error) {
            console.log(error);
          },
          async: true,
          data: fileObj.data,
          cache: false,
          processData: false,
          timeout: 60000
        });
        
      },
      error: function (error) {
        console.log(error);
      },
      async: true,
      data: JSON.stringify(metadata),
      cache: false,
      processData: false,
      timeout: 60000
    });
}  
</script>

笔记：

• 在这个脚本中，我修改了你的脚本。
• 这是一个简单的示例脚本。 所以请根据您的实际情况进行修改。

参考：

• 上传文件数据
• 执行可恢复上传