Question

我正在尝试创建一个功能，该功能可以在应用程序脚本中从用户本地内存上传图像并将其发送到连接的Google云端硬盘。我似乎能够与驱动器和文件进行交互，但是每当我上传图像时，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);
});

Answer 2

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

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

使用Apps脚本将图像上传到Google云端硬盘

3 个答案: