javascript - 使用 Apps 脚本将图片上传到 Google 云端硬盘

Question

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

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

谢谢你的帮助

我已阅读有关 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();
  }
}    

它有效，但上传的结果文件不是图像。

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