Javascript 如何使用gapi和可恢复上载将文件上载到Google drive?
我正试图遵循指南,通过谷歌Api在谷歌硬盘上进行可恢复上传 这是我的代码,您可以看到它根据指南的要求发出2个请求,第一部分创建元数据,然后我们使用第一个请求创建的会话开始上传文件的位置Javascript 如何使用gapi和可恢复上载将文件上载到Google drive?,javascript,google-api,google-api-js-client,Javascript,Google Api,Google Api Js Client,我正试图遵循指南,通过谷歌Api在谷歌硬盘上进行可恢复上传 这是我的代码,您可以看到它根据指南的要求发出2个请求,第一部分创建元数据,然后我们使用第一个请求创建的会话开始上传文件的位置 const file = new File(['Hello, world!'], 'hello world.txt', { type: 'text/plain;charset=utf-8' }); const contentType = file.type || 'applicat
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的主体,他们正在截断它
传递文件的正确方法是什么?我尝试了body:file和body:reader.result,但结果相同
PS:gapi已经完全通过身份验证并用auth2初始化,我可以创建文件/目录
编辑1:
gapi库只是JSOIN文件数组,因此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);
如果某人有一些提示..您必须使用XMLHttpRequest发出跨源HTTP请求。gapi客户端不支持XMLHttpRequest。即使您没有在初始请求中发送文件二进制数据,也必须对初始请求和上载文件的请求使用XMLHttpRequest,以便返回的位置url提供适当的响应头(访问控制允许来源:您的url)并满足CORS要求 下面是一个在转换请求时可能很有用的方法 您可以使用链接到的页面中描述的请求信息。但不提供有关获取身份验证令牌的任何信息 我能够使用以下代码成功上载文件:
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
}));
但这里有一个更强大的回购协议来处理所有这些问题:这是BMcV解决方案转换为http服务
const contentType = file.type || 'application/octet-stream';
const baseRoot = gapi['config'].get('googleapis.config').root;
const reader = new FileReader();
reader.onload = (e) => {
const authHeader = `Bearer ${this.auth.currentUser.get().getAuthResponse().access_token}`;
const metadataHeaders = {
'Authorization': authHeader,
'Content-Type': 'application/json',
'X-Upload-Content-Length': file.size,
'X-Upload-Content-Type': contentType
};
const metadataOptions = new RequestOptions({ headers: new Headers(metadataHeaders) });
const url = `${baseRoot}/upload/drive/v3/files?uploadType=resumable`;
const metadata = {
'name': file.name,
'mimeType': contentType,
'Content-Type': contentType,
'Content-Length': file.size
};
this.http.post(url, metadata, metadataOptions).subscribe(metadataRes => {
const locationUrl = metadataRes.headers.get('Location');
const uploadHeaders = {
'Content-Type': contentType,
'X-Upload-Content-Type': contentType
};
const uploadOptions = new RequestOptions({ headers: new Headers(uploadHeaders) });
this.http.put(locationUrl, reader.result, uploadOptions).subscribe(uploadRes => {
console.log(uploadRes.json());
});
}, (err) => {
console.error(err);
});
};
reader.readAsArrayBuffer(file);
您使用的GAPI版本是什么?此外,GAPI似乎正在使用sreams在NodeJ中上传IFLE。你可以尝试使用最新版本,你在哪里找到关于流(套接字)使用的文档?看看NodeJS示例。我在浏览器上,不能使用NodeJS流。你有没有尝试过发送有关该问题的反馈?谢谢,你值得赏金。我和你做的一样,但最后的$http服务给了我一些CORS错误。可能是我弄乱了一些http头,驱动器的其他部分拒绝我上传文件