将反应生成的 pdf 上传到 google 驱动器

Question

在我的应用程序中，我正在使用 react-pdf 创建一个 pdf 文件。 我希望用户能够将此生成的 pdf 上传到 google 驱动器.. 到目前为止，我已经尝试过 with blob ，但我没有成功。 很高兴有任何帮助！谢谢！

    const doc = <MyDocument req={props.data} />;
    const asPdf = pdf([]); 
    asPdf.updateContainer(doc);
    const blob = await asPdf.toBlob();

    
    const boundary = "foo_bar_baz";
    const delimiter = "\r\n--" + boundary + "\r\n";
    const close_delim = "\r\n--" + boundary + "--";
    var fileName = "mydocument.pdf";
    var fileData =  blob;
    var contentType = "application/pdf";
    var metadata = {
      name: fileName,
      mimeType: contentType,
    };



    var multipartRequestBody =
      delimiter +
      "Content-Type: application/json; charset=UTF-8\r\n\r\n" +
      JSON.stringify(metadata) +
      delimiter +
      "Content-Type: " +
      contentType +
      "\r\n\r\n" +
      fileData +
      "\r\n" +
      close_delim;

    console.log(multipartRequestBody);
    var request = window.gapi.client.request({
      path: "https://www.googleapis.com/upload/drive/v3/files",
      method: "POST",
      params: { uploadType: "multipart" },
      headers: {
        "Content-Type": "multipart/related; boundary=" + boundary + "",
      },
      body: multipartRequestBody,
    });
    request.execute(function (file) {
      console.log(file);
      console.log(fileData)

    });

Answer 1

修改点：

• 在这种情况下，我建议使用 base64 数据而不是 blob。

当这一点反映到你的脚本中，就变成了下面这样。

修改后的脚本：

从：

var multipartRequestBody =
  delimiter +
  "Content-Type: application/json; charset=UTF-8\r\n\r\n" +
  JSON.stringify(metadata) +
  delimiter +
  "Content-Type: " +
  contentType +
  "\r\n\r\n" +
  fileData +
  "\r\n" +
  close_delim;

到：

// I added below function.
const base64 = blob => new Promise((resolve, reject) => {
  const fr = new FileReader();
  fr.onload = () => resolve(fr.result.split(",").pop());
  fr.onerror = () => reject(fr.error);
  fr.readAsDataURL(blob);
});
var multipartRequestBody =
  delimiter +
  "Content-Type: application/json; charset=UTF-8\r\n\r\n" +
  JSON.stringify(metadata) +
  delimiter +
  "Content-Type: " + contentType + "\r\n" +
  'Content-Transfer-Encoding: base64\r\n\r\n' +  // Added
  await base64(blob) +  // Modified
  "\r\n" +
  close_delim;

• 我使用 FileReader 将 blob 转换为 base64 数据。

注：

• 在此修改中，假设 const blob = await asPdf.toBlob(); 的 blob 是 PDF 数据的有效 blob。请注意这一点。
• 并且，此答案假定您已经能够使用云端硬盘 API 上传文件。请注意这一点。

参考：

• FileReader