javascript - 无法使用 API 在 Google 云端硬盘中打开上传的文件

Question

我在 Google Drive API 版本 3 中发送请求。 我有一个 Base64 图像。 我有这个代码，

var callback = function(ret, raw) {
    var obj = $.parseJSON(raw);
    self.uploadUrl = obj.gapiRequest["data"]["headers"]["location"];
    const boundary = '-------314159265358979323846';
      const delimiter = "\r\n--" + boundary + "\r\n";
      const close_delim = "\r\n--" + boundary + "--";

      var reader = new FileReader();
      reader.readAsBinaryString(data);
      reader.onload = function(e) {
      console.log(reader.result);
        var contentType = data.type || 'application/octet-stream';
        var metadata = {
          'name': data.name,
          'mimeType': contentType
        };

        var base64Data = btoa(reader.result);
        var multipartRequestBody = reader.result;
        console.log(self.uploadUrl);
        var request = gapi.client.request({
            'path': self.uploadUrl.replace('https://www.googleapis.com', ''),
            'method': 'PUT',
            'headers': {
              'Authorization': 'Bearer ' + self.state.token, 'Content-Length': data.size, 'Content-Type': data.type
            },
            'body': multipartRequestBody});
          var callback2 = function(file) {
            console.log(file)
          };
        request.execute(callback2);
      }

    };

根据该请求，我控制台记录此消息:Object {kind: "drive#file", id: "0B0jyCEQS7DFib19iX2FLYm1yR28", name: "MyFileTitle", mimeType: "image/jpeg"}

所以我在这里假设我成功上传了一个文件。但是当我在 Google Drive 中查看文件时，我无法打开它。也没有文件的预览。我下载了文件，还是打不开。这里有什么问题？谁能帮帮我？

这是响应头，

Request URL:https://content.googleapis.com/upload/drive/v3/files?uploadType=resumable&upload_id=AEnB2UoIhN3QtsUc1qLW5N_3yG-NOyl9Nm-maYY7T5X4dQbMK_hxu9M-E9L1247jeLEtRQJd8w8IA_GH_6HSWbNrFnocfmt31-oA0iXXHTcZE7k2aIIAvHQ
Request Method:PUT
Status Code:200 
Remote Address:216.58.197.170:443

这是我的请求头，

Authorization:Bearer <MY_TOKEN>
Content-Type:image/jpeg
Origin:https://content.googleapis.com
X-Requested-With:XMLHttpRequest

uploadType:resumable
upload_id:AEnB2UoIhN3QtsUc1qLW5N_3yG-NOyl9Nm-maYY7T5X4dQbMK_hxu9M-E9L1247jeLEtRQJd8w8IA_GH_6HSWbNrFnocfmt31-oA0iXXHTcZE7k2aIIAvHQ

请求有效载荷是这样的，

ÿØÿàJFIFHHÿÛC       ...

仍然无法打开文件。

这是文件的创建，

submitForm(e){
e.preventDefault();
var data = this.refs.file.files[0];
var self = this;
var metadata = {
    'Content-Length': data.size,
    'name': data.name
};

var contentType = data.type;
var multipartRequestBody = JSON.stringify(metadata);
var request = gapi.client.request({
    'path': '/upload/drive/v3/files',
        'method': 'POST',
    'params': {'uploadType': 'resumable'},
    'headers': {
            'Authorization': 'Bearer ' + self.state.token, 'Content-Type': 'application/json; charset=UTF-8', 'X-Upload-Content-Type': data.type, 'X-Upload-Content-Length': data.size
        },
    'body': multipartRequestBody});

var callback = ...

request.execute(callback);
}

上面的代码是文件的创建。我添加它是因为问题可能出在这部分。

Answer 1

Object {kind: "drive#file", id: "0B0jyCEQS7DFib19iX2FLYm1yR28", name: "MyFileTitle", mimeType: "image/jpeg"}

您正在上传类型为 image/jpeg 的文件，但名称为 MyFileTitle。我认为您对驱动器感到困惑，如果它不知道文件是什么就无法打开它。

尝试将其更改为 MyFileTitle.jpg。