如何使用 Google Drive API 上传 FILE_URI：插入文件答案

【问题标题】：How to upload FILE_URI using Google Drive API: Insert File如何使用 Google Drive API 上传 FILE_URI：插入文件
【发布时间】：2013-09-18 00:25:28
【问题描述】：

在 Android 上，我正在尝试使用 Google Drive API 上传 Cordova/Phonegap getPicture() 的输出：插入文件。有没有办法使用 FILE_URI 而不是 DATA_URL (base64) 来做到这一点？

我首先尝试了 Camera.DestinationType.DATA_URL，但它没有返回应有的 Base64 数据，它只是返回了与 FILE_URI 相同的内容。所以现在我想弄清楚如何将 FILE_URI 传递给 Google Drive 插入文件（需要 Base64）。有没有办法将 FILE_URI 转换为 Base64？

科尔多瓦代码：

navigator.camera.getPicture(onSuccess, onFail,
    { quality: 50, destinationType: Camera.DestinationType.FILE_URI });

function onSuccess(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI;

    // need to do something like this:
    var fileData = ConvertToBase64(imageURI);
    insertFile(fileData);
}

Google 云端硬盘代码：

/**
 * Insert new file.
 *
 * @param {File} fileData File object to read data from.
 * @param {Function} callback Function to call when the request is complete.
 */
function insertFile(fileData, callback) {
  const boundary = '-------314159265358979323846';
  const delimiter = "\r\n--" + boundary + "\r\n";
  const close_delim = "\r\n--" + boundary + "--";

  var reader = new FileReader();
  reader.readAsBinaryString(fileData);
  reader.onload = function(e) {
    var contentType = fileData.type || 'application/octet-stream';
    var metadata = {
      'title': fileData.fileName,
      'mimeType': contentType
    };

    var base64Data = btoa(reader.result);
    var multipartRequestBody =
        delimiter +
        'Content-Type: application/json\r\n\r\n' +
        JSON.stringify(metadata) +
        delimiter +
        'Content-Type: ' + contentType + '\r\n' +
        'Content-Transfer-Encoding: base64\r\n' +
        '\r\n' +
        base64Data +
        close_delim;

    var request = gapi.client.request({
        'path': '/upload/drive/v2/files',
        'method': 'POST',
        'params': {'uploadType': 'multipart'},
        'headers': {
          'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
        },
        'body': multipartRequestBody});
    if (!callback) {
      callback = function(file) {
        console.log(file)
      };
    }
    request.execute(callback);
  }
}

【问题讨论】：

标签： android mobile cordova google-drive-api

【解决方案1】：

我意识到这有点老了 - 但现在看起来你可以在 phoneGap 中使用FileReader。

我还没有对此进行测试，但类似的东西应该也可以工作，没有画布 hack。

[编辑 - 测试并修改了下面的代码。为我工作：D]

var cfn = function(x) { console.log(x) };
var cameraOps = { quality: 50, destinationType: Camera.DestinationType.FILE_URI };
navigator.camera.getPicture(function(imagePath) {
    window.resolveLocalFileSystemURL(imagePath, function(fileEntry) {
        fileEntry.file(function (file) {
            var reader = new FileReader();
            reader.onloadend = function(evt) {
                console.log("read success!!!");
                console.log(evt.target.result);
            };
            reader.readAsDataURL(file);
        }, cfn);
    }, cfn);
}, cfn);

【讨论】：

这似乎是更好的选择，尤其是远离document，感谢发布。

【解决方案2】：

是的你可以....

将 Destination Type 指定为 FILE_URI 本身，在 imagedata 中，您将获取图像文件 uri 将其放置在图像标签中，然后将其放置在 HTML5 canvas 中，并且画布有一种称为 toDataURL的方法> 在那里你将能够得到相应图像的base64。

function onSuccess(imageData)
     {

                var $img = $('<img/>');
                $img.attr('src', imageData);
                $img.css({position: 'absolute', left: '0px', top: '-999999em', maxWidth: 'none', width: 'auto', height: 'auto'});
                $img.bind('load', function() 
                {
                    var canvas = document.createElement("canvas");
                    canvas.width = $img.width();
                    canvas.height = $img.height();
                    var ctx = canvas.getContext('2d');
                    ctx.drawImage($img[0], 0, 0);
                    var dataUri = canvas.toDataURL('image/png');

                });
                $img.bind('error', function() 
                {
                    console.log('Couldnt convert photo to data URI');
                });

    }

【讨论】：

嗯，这很有趣。我有几个问题。 1）canvas.toDataURL 的输出是否重新采样了我的原始 jpeg？还是相同？ 2）我猜这仅适用于图像，而不适用于其他类型的文件？
1) 是的...您将获得原始图像的 base64...两者是相同的...没有问题..2)我只尝试过图像并且它有效..我认为它不适用于其他文件类型..
另一种方法是使用Phonegap的文件传输API docs.phonegap.com/en/1.0.0/…
谢谢阿伦。我不知何故无法让你的例子运行。但它让我走上了正确的道路，我能够让它发挥作用！见stackoverflow.com/a/18881640/1081043
"1)是的......你会得到原始图像的base64......两者都是相同的......没有问题”我相信从技术上讲，它是重新编码图像。如果原始和输出都是PNG（无损），则没有任何区别，但如果输出是image/jpeg，则会有重新编码损失。

【解决方案3】：

感谢 Arun 为我指明了正确的方向。我最终使用了这个基于 http://jsfiddle.net/jasdeepkhalsa/L5HmW/

的 javascript 函数

function getBase64Image(imgElem) {
// imgElem must be on the same server otherwise a cross-origin error will be thrown "SECURITY_ERR: DOM Exception 18"
    var canvas = document.createElement("canvas");
    canvas.width = imgElem.clientWidth;
    canvas.height = imgElem.clientHeight;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElem, 0, 0);
    var dataURL = canvas.toDataURL("image/jpeg");
    dataURL = dataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
    return dataURL;
}

【讨论】：