如何使用gapi和resumable上传文件将文件上传到Google云端硬盘？

Question

我正在尝试按照此指南通过Google Api在Google云端硬盘上进行可恢复上传.

这是我的代码,您可以看到它在指南要求时发出2个请求,第一部分创建元数据,然后我们使用该位置开始使用第一个请求创建的会话上载文件.

        const file = new File(['Hello, world!'], 'hello world.txt', { type: 'text/plain;charset=utf-8' });
        const contentType = file.type || 'application/octet-stream';

        const reqMetadata = gapi.client.request({
            'path': 'upload/drive/v3/files',
            'method': 'POST',
            'params': { 'uploadType': 'resumable' },
            'headers': {
                'X-Upload-Content-Type': file.type,
                'X-Upload-Content-Length': file.size,
                'Content-Type': 'application/json; charset=UTF-8'
            },
            'body': {
                'name': file.name,
                'mimeType': contentType,
                'Content-Type': contentType,
                'Content-Length': file.size
            }
        });

        reqMetadata.execute((respMetadata, rawRespMetadata: any) => {
            const locationUrl = JSON.parse(rawRespMetadata).gapiRequest.data.headers.location;

            const reader = new FileReader();

            reader.onload = (e) => {
                const reqFile = gapi.client.request({
                    'path': locationUrl,
                    'method': 'PUT',
                    'headers': {
                        'Content-Type': file.type,
                        'Content-Length': file.size
                    },
                    'body': reader.result
                });

                reqFile.execute(respFile => {
                    console.log(respFile);
                });
            };

            reader.readAsArrayBuffer(file);
        });

有什么问题？

好吧,似乎Google Api库不喜欢他们的gapi.client.request上的文件/字节数组作为正文,他们正在截断它

传递文件的正确方法是什么？我尝试了两个身体:文件和正文:reader.result但结果相同

PS:gapi已经完全认证并使用auth2初始化,我可以创建文件/目录.

编辑1:

gapi库只是joing FileArray,因此JSON函数将其修改为空对象,无法使其工作..必须缺少某些东西.

编辑2:

我没有GAPI就可以正常工作,它正确上传了文件但我在CORS上遇到了一些问题

            reader.onload = (e) => {                    

                const authHeader = `Bearer ${this.auth.currentUser.get().getAuthResponse().access_token}`;
                const headers = new Headers({
                    'Authorization': authHeader,
                    'Content-Type': file.type
                });
                const options = new RequestOptions({ headers });
                const url = locationUrl;

                this.http.put(url, reader.result, options).subscribe(res => {
                    observer.next(res);
                }, (err) => {
                    observer.next({});
                });
            };

            reader.readAsArrayBuffer(file);

如果有人有一些提示..

Answer 1

您必须使用 XMLHttpRequest 来发出跨源 HTTP 请求。gapi 客户端不支持 XMLHttpRequest。（但是这个拉取请求已经打开了一段时间）即使您没有在初始请求中发送文件二进制数据，您也必须对初始请求和上传文件的请求使用 XMLHttpRequest，以便返回的位置 url 提供适当的响应头 (Access-Control-Allow-Origin: YOUR_URL) 并满足 CORS 要求。

这是一个关于 CORS 和 XMLHttpRequest的很棒的教程，可能对转换您的请求很有用。

您可以使用链接到的页面中描述的请求信息。此示例显示请求信息，但不提供有关获取身份验证令牌的任何信息。但是这个例子确实如此！

我能够使用以下代码成功上传文件：

const file = new File(['Hello, world!'], 'hello world.txt', { type: 'text/plain;charset=utf-8' });
const contentType = file.type || 'application/octet-stream';
const user = gapi.auth2.getAuthInstance().currentUser.get();
const oauthToken = user.getAuthResponse().access_token;
const initResumable = new XMLHttpRequest();
initResumable.open('POST', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable', true);
initResumable.setRequestHeader('Authorization', 'Bearer ' + oauthToken);
initResumable.setRequestHeader('Content-Type', 'application/json');
initResumable.setRequestHeader('X-Upload-Content-Length', file.size);
initResumable.setRequestHeader('X-Upload-Content-Type', contentType);
initResumable.onreadystatechange = function() {
  if(initResumable.readyState === XMLHttpRequest.DONE && initResumable.status === 200) {
    const locationUrl = initResumable.getResponseHeader('Location');
    const reader = new FileReader();
    reader.onload = (e) => {
      const uploadResumable = new XMLHttpRequest();
      uploadResumable.open('PUT', locationUrl, true);
      uploadResumable.setRequestHeader('Content-Type', contentType);
      uploadResumable.setRequestHeader('X-Upload-Content-Type', contentType);
      uploadResumable.onreadystatechange = function() {
        if(uploadResumable.readyState === XMLHttpRequest.DONE && uploadResumable.status === 200) {
          console.log(uploadResumable.response);
         }
      };
      uploadResumable.send(reader.result);
    };
    reader.readAsArrayBuffer(file);
  }
};

// You need to stringify the request body containing any file metadata

initResumable.send(JSON.stringify({
  'name': file.name,
  'mimeType': contentType,
  'Content-Type': contentType,
  'Content-Length': file.size
}));

但是这里有一个更强大的 repo 来处理所有这些：https : //github.com/googledrive/cors-upload-sample