Javascript 将PDF文件上载到Google Drive_Javascript_Google Drive Api

Javascript 将PDF文件上载到Google Drive

javascript google-drive-api

Javascript 将PDF文件上载到Google Drive,javascript,google-drive-api,Javascript,Google Drive Api,我正试图用Javascript将下面的文件上传到我的谷歌硬盘上，并使用这个例子。该文件由用户选择过程动态创建，然后自动下载到默认目录（下载）。有没有办法将文件同时放在谷歌硬盘上？我正在使用jsPDF，并尝试了以下几种方法，但没有成功 E:\Downloads\MyFile.pdf 我绕过了文件选择器，因为我知道上传哪个文件。我已经修改了Google示例，将代码传递给文件名，但是失败了我想我需要在我的硬盘上创建一个文件块，然后传递到GoogleAPI，但我尝试了一些组合，但没有成功。感谢您的帮

我正试图用Javascript将下面的文件上传到我的谷歌硬盘上，并使用这个例子。该文件由用户选择过程动态创建，然后自动下载到默认目录（下载）。有没有办法将文件同时放在谷歌硬盘上？我正在使用jsPDF，并尝试了以下几种方法，但没有成功

E:\Downloads\MyFile.pdf

我绕过了文件选择器，因为我知道上传哪个文件。我已经修改了Google示例，将代码传递给文件名，但是失败了

我想我需要在我的硬盘上创建一个文件块，然后传递到GoogleAPI，但我尝试了一些组合，但没有成功。感谢您的帮助

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <script type="text/javascript">
      var CLIENT_ID = 'my-client-id';
      var SCOPES = 'https://www.googleapis.com/auth/drive';
      var FOLDER_ID = 'my-drive-folder-id';

      /**
       * Called when the client library is loaded to start the auth flow.
       */
      function handleClientLoad() {
        window.setTimeout(checkAuth, 1);
      }

      /**
       * Check if the current user has authorized the application.
       */
      function checkAuth() {
        gapi.auth.authorize(
            {'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': true},
            handleAuthResult);
      }

      /**
       * Called when authorization server replies.
       *
       * @param {Object} authResult Authorization result.
       */
      function handleAuthResult(authResult) {
        if (authResult && !authResult.error) {
            var MyFile = "E:\PAPA\Downloads\test.pdf";
            insertFile(MyFile);
        }
      }

      /**
       * Start the file upload.
       *
       * @param {Object} evt Arguments from the file selector.
       */
      function uploadFile(evt) {
        gapi.client.load('drive', 'v2', function() {
          var file = evt.target.files[0];
          insertFile(file);
        });
      }

      /**
       * 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.name,
            'mimeType': contentType,
            'parents': [{"id":FOLDER_ID}]
          };

          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);
        }
      }
    </script>
    <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
  </head>
  <body>
    <!--Add a file picker for the user to start the upload process -->
    <input type="file" id="filePicker" style="display: none" />
    <input type="button" id="authorizeButton" style="display: none" value="Authorize" />
  </body>
</html>


var CLIENT_ID='我的客户ID'；
var作用域https://www.googleapis.com/auth/drive';
var FOLDER_ID='my drive FOLDER ID'；
/**
*在加载客户端库以启动身份验证流时调用。
*/
函数handleClientLoad（）{
setTimeout（checkAuth，1）；
}
/**
*检查当前用户是否已授权应用程序。
*/
函数checkAuth（）{
gapi.auth.authorize(
{'client\u id'：client\u id，'scope'：SCOPES，'immediate'：true}，
手工（结果）；
}
/**
*当授权服务器答复时调用。
*
*@param{Object}authResult授权结果。
*/
函数handleAuthResult（authResult）{
if（authResult&！authResult.error）{
var MyFile=“E:\PAPA\Downloads\test.pdf”；
插入文件（MyFile）；
}
}
/**
*开始文件上传。
*
*@param{Object}来自文件选择器的evt参数。
*/
函数上传文件（evt）{
load（'drive'，'v2'，function（）{
var file=evt.target.files[0]；
插入文件（文件）；
});
}
/**
*插入新文件。
*
*要从中读取数据的@param{File}fileData文件对象。
*@param{Function}在请求完成时调用的回调函数。
*/
函数insertFile（fileData，回调）{
常量边界='----314159265358979323846'；
常量分隔符=“\r\n--”+边界+“\r\n”；
const close_delim=“\r\n--”+边界+“--”；
var reader=new FileReader（）；
reader.readAsBinaryString（fileData）；
reader.onload=函数（e）{
var contentType=fileData.type | |“应用程序/八位字节流”；
变量元数据={
“title”：fileData.name，
“mimeType”：contentType，
'父项'：[{“id”：文件夹\u id}]
};
var base64Data=btoa（reader.result）；
var multipartRequestBody=
分隔符+
'内容类型：application/json\r\n\r\n'+
stringify（元数据）+
分隔符+
'内容类型：'+contentType+'\r\n'+
'内容传输编码：base64\r\n'+
“\r\n”+
Base64数据+
闭上眼睛；
var request=gapi.client.request({
“路径”：“/upload/drive/v2/files/”，
'method'：'POST'，
'params'：{'uploadType'：'multipart'}，
“标题”：{
'内容类型'：'多部分/混合；边界='+边界+''
},
“body”：multipartRequestBody}）；
如果（！回调）{
回调=函数（文件）{
console.log（文件）
};
}
执行（回调）；
}
}

我绕过了文件选择器，因为我知道上传哪个文件。我已经修改了Google示例，将代码传递给文件名，但是失败了

这就是问题所在

包含文件名的字符串不是文件

浏览器不提供网站根据文件名从访问者驱动器读取文件的方法（这将是一个巨大的安全漏洞）。

您可以与“保存到驱动器”按钮集成：

那么你就不必担心通过他们的本地下载文件夹进行的额外重定向。

Hi@Quentin，我明白了。有没有办法做到这一点？用户根据所做的选择创建PDF，然后自动下载到下载文件夹。有没有一种方法可以同时将副本放在Google Drive上？如果您是在客户端创建副本，那么可能，但您必须使用创建PDF时使用的数据来创建文件对象，而不是位置，然后将其保存到。如果您是在服务器端创建它，那么您必须将它从服务器端代码发送到Dropbox。谢谢您的回复。我正在用jsPDF创建it客户端，然后将其保存在本地硬盘上。那么在保存文件之前创建文件对象？如何搜索关于此的示例？坦斯克！可能地这不是我做过的事。