使用 Apps 脚本将图像上传到 Google Drive答案

【问题标题】：Uploading image to Google Drive using Apps Script使用 Apps 脚本将图像上传到 Google Drive
【发布时间】：2019-08-01 14:46:00
【问题描述】：

我正在尝试创建一个函数，该函数从用户本地内存上传图像并将其发送到应用程序脚本中连接的 Google Drive。我似乎能够与驱动器和文件进行交互，但是每当我上传图像时，谷歌驱动器中有一个名称正确的文件，但它不是图像，它似乎是一个包含所有内容的文本文件图片的数据。

我似乎无法判断错误在哪里或哪里出了问题。如果有人甚至可以给我一些我需要学习或阅读的东西的提示，这样我就可以找到自己的错误，或者给我答案，无论哪种方式，我只想知道我哪里出错了:)

感谢您的帮助

我已阅读有关 FileReader API 的文档，认为我没有正确使用 onloadend 事件，我尝试将图像转换为 blob 和字符串，并尝试从中创建文件。

function addImageToDrive() {
  var file = $('#capture')[0].files[0];
  var reader = new FileReader();

  reader.readAsDataURL(file);

  reader.onloadend = function(e) {
    google.script.run
      .withSuccessHandler()
      .withFailureHandler(errorAlert)
      .uploadFileToGoogleDrive("regNo","Test",e.target.result);
  });
}

<fieldset>
  <div>
    <button type = "button" id = "submitPhoto" 
       onclick="addImageToDrive()">PHOTO</button>
    <input type="file" accept="image/*" capture="camera" id = "capture">
    <p><img src="" id="img_preview" alt="No Image Selected"/></p>
  </div>
</fieldset>

function uploadFileToGoogleDrive(regNo,fileName,data) {  
  try {         
    var regFolder = checkIfFolderExists(regNo);      
    // var blob = DriveApp.createFile("test File",data);
    var contentType = data.substring(5,data.indexOf(';')),
        bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
        blob = Utilities.newBlob(bytes, contentType, regNo + fileName);

    DriveApp.getFolderById(regFolder).createFile(blob);

    Logger.log("Complete");
    return "OK";      
  } catch (f) {
    Logger.log(f.toString());
    return f.toString();
  }
}

它可以工作，但上传的结果文件不是图像。

【问题讨论】：

如果 checkIfFolderExists(regNo) 返回有效的文件夹 ID，我认为您的脚本有效。那么你能提供整个脚本和示例图像来复制你的情况吗？借此，我想确认一下。当然，请删除您的个人信息。
我测试了您的代码，只更改了 regFolder 以获得有效的文件夹 ID，并且运行良好。我将 .png 和 .jpeg 图像上传到云端硬盘，并且能够在浏览器中打开它们。请提供示例图片。

标签： javascript google-apps-script google-drive-api filereader

【解决方案1】：

var fileContent = 'sample text'; // As a sample, upload a text file.
var file = new Blob([fileContent], {type: 'text/plain'});
var metadata = {
'name': 'sampleName', // Filename at Google Drive
'mimeType': 'text/plain', // mimeType at Google Drive
'parents': ['### folder ID ###'], // Folder ID at Google Drive    
};

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', file);

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

【讨论】：

【解决方案2】：

您的 addImageToDrive 函数的最后一行有一个额外的)，这可能是导致问题的原因。

【讨论】：

【解决方案3】：

您需要上传arraybuffer中的数据而不是二进制大对象

var blob;//image data
var imageSize;//image size
var reader= new FileReader();
reader.readAsArrayBuffer(blob).then((response)=>{
var viewArraybuffer=new Uint8Array(response);
var xhr=new XMLHttpRequest();
xhr.open("POST", "https://www.googleapis.com/upload/drive/v3/files?uploadType=media", true);
          xhr.setRequestHeader("Authorization", `Bearer ${token.accessToken}`);
          xhr.setRequestHeader("Content-Type", `image/png`);
          xhr.setRequestHeader("Content-Length",imageSize );
})
xhr.send(viewArrayBuffer);

xhr.onreadystatechange=function () {
            if(xhr.readyState === 4 && xhr.status === 200) {
              console.log(xhr.responseText);
            }
          }

【讨论】：