Question

我正在尝试使用Google云端硬盘api上传文件，并且元数据正确无误，并且我想确保实际的文件内容都在其中。我有一个简单的页面设置，如下所示：

<div id="upload">
  <h6>File Upload Operations</h6>
  <input type="file" placeholder='file' name='fileToUpload'>
  <button id='uploadFile'>Upload File</button>
</div>

，我有一个javascript设置，提示用户先登录，然后他们才能上传文件。这是代码：（当前仅上传文件元数据...。）

let uploadButton = document.getElementById('uploadFile');
uploadButton.onclick = uploadFile;
const uploadFile = () => {
    let ftu = document.getElementsByName('fileToUpload')[0].files[0];
    console.dir(ftu);
    gapi.client.drive.files.create({
        'content-type': 'application/json;charset=utf-8',
        uploadType: 'multipart',
        name: ftu.name,
        mimeType: ftu.type,
        fields: 'id, name, kind'
    }).then(response => {
        console.dir(response);
        console.log(`File: ${ftu.name} with MimeType of: ${ftu.type}`);
        //Need code to upload the file contents......
    });
};

首先，我对后端更加熟悉，因此从<input type='file'>标记中逐位获取文件对我来说有点模糊。从好的方面来说，元数据在那里。如何获取文件内容到api？

Answer 1

根据您的情况，使用gapi.client.drive.files.create()上传文件时，将创建包含已上传元数据的空文件。如果我的理解是正确的，该解决方法如何？我和你也经历过同样的情况。当时，我使用了这种解决方法。

修改点：

使用gapi检索访问令牌。
使用XMLHttpRequest上传文件。

修改后的脚本：

请修改uploadFile()中的脚本。

let ftu = document.getElementsByName('fileToUpload')[0].files[0];
var metadata = {
    'name': ftu.name,
    'mimeType': ftu.type,
};
var accessToken = gapi.auth.getToken().access_token; // Here gapi is used for retrieving the access token.
var form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
form.append('file', ftu);

var xhr = new XMLHttpRequest();
xhr.open('post', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id,name,kind');
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.responseType = 'json';
xhr.onload = () => {
    console.log(xhr.response);
};
xhr.send(form);

注意：

在此修改后的脚本中，它假定在API控制台上启用了Drive API，并且访问令牌可用于上传文件。
关于字段，您正在使用id,name,kind。因此，此示例也使用它们。

参考：

gapi

如果我误解了您的问题，或者此解决方法对您的情况没有帮助，对不起。

编辑：

当您想使用fetch时，此示例脚本如何？

let ftu = document.getElementsByName('fileToUpload')[0].files[0];
var metadata = {
    'name': ftu.name,
    'mimeType': ftu.type,
};
var accessToken = gapi.auth.getToken().access_token; // Here gapi is used for retrieving the access token.
var form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
form.append('file', ftu);

fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id,name,kind', {
  method: 'POST',
  headers: new Headers({'Authorization': 'Bearer ' + accessToken}),
  body: form
}).then((res) => {
  return res.json();
}).then(function(val) {
  console.log(val);
});

Answer 2

因此，根据在为期三天的搜索中发现的一些相关信息，该文件根本无法通过gapi客户端上传。必须通过真正的REST HTTP调用上载它。因此，让我们使用fetch！

const uploadFile = () => {
    //initialize file data from the dom
    let ftu = document.getElementsByName('fileToUpload')[0].files[0];
    let file = new Blob([ftu]); 
    //this is to ensure the file is in a format that can be understood by the API

    gapi.client.drive.files.create({
        'content-type': 'application/json',
        uploadType: 'multipart',
        name: ftu.name,
        mimeType: ftu.type,
        fields: 'id, name, kind, size'
    }).then(apiResponse => {
        fetch(`https://www.googleapis.com/upload/drive/v3/files/${response.result.id}`, {
         method: 'PATCH',
         headers: new Headers({
             'Authorization': `Bearer ${gapi.client.getToken().access_token}`,
              'Content-Type': ftu.type
         }),
         body: file
       }).then(res => console.log(res));

}

通过调用gapi.client.getToken().access_token函数来分配授权标头，基本上，这将从gapi调用的响应中获取空对象，并调用fetch api来上传文件的实际位！

Google Drive API和从浏览器上传的文件

2 个答案:

修改点：

修改后的脚本：

注意：

参考：

编辑：