在浏览器上使用javascript在Google API上发送发布请求

Question

我在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之前得到的谷歌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错误。

我想在这里做的是上传图片文件到谷歌驱动器。我该如何做到这一点？任何解决我的问题？

Answer 1

404错误是由于url缺失files部分引起的：https://www.googleapis.com/upload/drive/v3/files?uploadType=media。见Google Drive APIs > REST - Files: create。

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

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); 
});