Javascript 如何将uploadType=resumable的文件上载到google drive api

我尝试按照可恢复上传类型的参数上传一个文件，状态为200（OK），但文件没有上传

• 状态视图

参考：

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

$.ajax({
类型：“POST”，
发送前：功能（请求）{
setRequestHeader（“授权”、“承载”+“”+localStorage.getItem（“accessToken”）；
setRequestHeader（“内容类型”，“应用程序/json；字符集=UTF-8”）；
},
url:“https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable",
成功：功能（数据）{
控制台日志（数据）；
},
错误：函数（错误）{
console.log（错误）；
},
async:true，
数据：JSON.stringify（{mimeType:“image/png”，name:“sample”}），
cache:false，
processData:false，
超时：60000
});

您希望使用ajax上传一个具有可恢复上传功能的文件
您的访问令牌可用于将文件上载到Google Drive
您已经能够使用驱动器API

修改点：

为了实现可恢复上传，需要执行以下流程

为可恢复上载创建会话。

这样，可以从响应头中检索位置作为端点。这用于上传数据


使用检索到的端点上载数据

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


在脚本中，不会显示文件内容。所以在这个答案中，作为一个示例，我添加了文件输入和按钮标记作为HTML



修改脚本：

const getData=（文件）=>
新承诺（（解决、拒绝）=>{
如果（文件）{
const fr=new FileReader（）；
fr.onload=f=>resolve（{filename:file.name，mimeType:file.type，fileSize:file.size，data:f.target.result}）；
fr.onerror=err=>拒绝（err）；
fr.readAsArrayBuffer（文件）；
}否则{
解析（{}）；
}
});
异步函数resumableUpload（）{
const accessToken=localStorage.getItem（“accessToken”）；
const file=document.getElementById（“文件”）.files[0]；
const fileObj=等待获取数据（文件）；
if（Object.keys（fileObj.length==0）{
log（“没有文件”）；
返回；
}
//1.为可恢复上载创建会话。。
常量元数据={mimeType:fileObj.mimeType，name:fileObj.filename}；
$.ajax({
类型：“POST”，
发送前：功能（请求）{
setRequestHeader（“授权”、“承载人”+“”+accessToken）；
setRequestHeader（“内容类型”，“应用程序/json；字符集=UTF-8”）；
},
url:“https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable",
成功：函数（数据，uR）{
const location=r.getResponseHeader（“位置”）；
//2.使用检索到的端点上载数据。
$.ajax({
键入：“放置”，
发送前：功能（请求）{
setRequestHeader（“内容范围”，字节0-${fileObj.fileSize-1}\/${fileObj.fileSize}`）；
},
url:位置，
成功：功能（数据）{
console.log（数据）
},
错误：函数（错误）{
console.log（错误）；
},
async:true，
数据：fileObj.data，
cache:false，
processData:false，
超时：60000
});
},
错误：函数（错误）{
console.log（错误）；
},
async:true，
数据：JSON.stringify（元数据），
cache:false，
processData:false，
超时：60000
});
}  

注:

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

参考资料：



非常感谢@Tanaike，我已经实施了它，它对我来说运行正常，我想知道如何更精确地检测需求，您是否有其他指南可以给我？@Vilmcode感谢您的回复。我很高兴你的问题解决了。关于附加指南，我不确定。我知道如何在官方文件中使用这个。我为此道歉。
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

<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>