在浏览器上使用 javascript 在 Google API 上发送 post 请求答案

【问题标题】：Send post request on Google API using javascript on browser在浏览器上使用 javascript 在 Google API 上发送 post 请求
【发布时间】：2017-07-29 20:37:42
【问题描述】：

我在 Google API 中的 $.ajax 请求中收到 404 错误。我有这些代码，

var asyncLoad = require('react-async-loader');
var CLIENT_ID = '<SOME_ID>';
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];
  var SCOPES = 'https://www.googleapis.com/auth/drive';

const mapScriptToProps = state => ({
   gapi: {
     globalPath: 'gapi',
     url: 'https://apis.google.com/js/api.js'
   }
});

@asyncLoad(mapScriptToProps)
...

我在 bundle.js 之前使用了 react 的异步加载器来获取 Google API。然后我得到了属性中的gapi。这是我提交表单的下一个代码。

submitForm(e){
e.preventDefault();
var data = this.refs.file.files[0];
var self = this;
var formData = new FormData();
formData.append('data', data); 
$.ajax({
    url: "https://www.googleapis.com/upload/drive/v3?uploadType=media&access_token="+encodeURIComponent(self.state.token),
    type: "POST",
    processData: false,
    data: formData,
    beforeSend: function (xhr) {
      /* Authorization header */
      xhr.setRequestHeader("Authorization", "Bearer " + self.state.token);
      xhr.setRequestHeader('X-Upload-Content-Length', data.size);
      xhr.setRequestHeader("Content-Type", "image/jpeg");
      xhr.setRequestHeader('X-Upload-Content-Type', "image/jpeg");
  },
    success: function(data){
        if(typeof data === "string") data = JSON.parse(data);
        console.log(data);
        if(data.success){
            console.log("done");
        }else {
            console.log("error");
        }
    }
});

}

所以在这里，我在点击按钮上传时调用 submitForm 函数。我也有ref="file" 的文件输入。这是在客户端（浏览器）端运行的。我收到 404 错误。

我在这里要做的是将图像文件上传到谷歌驱动器。我怎样才能做到这一点？我的问题有什么解决方案吗？

【问题讨论】：

标签： javascript jquery ajax node.js reactjs

【解决方案1】：

404错误是因为url缺少files部分：https://www.googleapis.com/upload/drive/v3/files?uploadType=media。见Google Drive APIs > REST - Files: create。

我设法使用FileReader.readAsDataURL() 方法上传了从<input type="file" accept="image/*"> 读取的图像，如下所示：

var metadata = {
    name: 'image.jpg',
    mimeType: 'image/jpeg'
}

var user = gapi.auth2.getAuthInstance().currentUser.get();
var oauthToken = user.getAuthResponse(true).access_token;

var boundary = 'foo_bar_baz';
var data = '--' + boundary + '\n';
data += 'content-type: application/json; charset=UTF-8' + '\n\n';
data += JSON.stringify(metadata) + '\n';
data += '--' + boundary + '\n';

var dataURL = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+EKhWh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZ...'
var dataURLparts = dataURL.split(',', 2);
var dataURLheaderParts = dataURLparts[0].split(':');
var dataURLheaderPayloadParts = dataURLheaderParts[1].split(';');

data += 'content-transfer-encoding: ' + dataURLheaderPayloadParts[1] + '\n';
data += 'content-type: ' + dataURLheaderPayloadParts[0] + '\n\n';
data += dataURLparts[1] + '\n';
data += '--' + boundary + '--';

$.ajax({
    type: 'POST',
    url: 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart',
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Authorization", "Bearer " + oauthToken);
     },
     contentType: 'multipart/related; boundary=' + boundary,
     data: data,
     processData: false
 }).done(function(response) {
     console.log(response);
 });

【讨论】：

【解决方案2】：

在拉了几个小时的头发并查看了相同的答案之后。唯一对我有用的是从多部分请求（Google 文档）更改为使用 FormData。

感谢answer。

虽然数据到达云端硬盘（成功上传），但未正确处理，因此无法查看图像或 PDF，下载显示它已保存在 base64 中。

const metadata = JSON.stringify({
  name: myFile.name,
  mimeType: myFile.type,
});

const requestData = new FormData();

requestData.append("metadata", new Blob([metadata], {
  type: "application/json"
}));

requestData.append("file", items[0].file);

const xhr = new XMLHttpRequest();

xhr.open("POST", "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart");

const token = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().access_token;

xhr.setRequestHeader("Authorization", `Bearer ${token}`);

xhr.send(requestData);

【讨论】：