JavaScript 使用 API v2 将 base64 图像数据写入 Dropbox答案

【问题标题】：JavaScript write base64 image data to Dropbox using API v2JavaScript 使用 API v2 将 base64 图像数据写入 Dropbox
【发布时间】：2016-12-06 14:55:35
【问题描述】：

我目前正在使用 Dropbox 为 Web 应用程序开发一项功能，我对它有点陌生。该功能涉及使用 HTML 5 Canvas 进行一些图像编辑并将画布图像保存到 Dropbox。

我要做的是将画布图像转换为 base64 图像数据，并仅在客户端使用 JavaScript 直接写入 Dropbox。

而且由于 Dropbox API v1 现在已弃用，我正在尝试在 v2 中实现这一点。

我已经进行了一些挖掘，但我能找到的大多数示例都是使用版本 1 API 中的 writeFile 方法，例如： Save image to dropbox with data from canvas

所以我只是想知道如何让它与 v2 API 一起使用？

先谢谢了。

【问题讨论】：

你有试过的代码吗？你真的必须将它编码为base64编码的字符串吗？您应该能够将其作为常规 blob 文件上传。
不，我不必将其编码为 base64 字符串。是的，我也可以提供一些代码，只是我还处于 POC 阶段，我正在探索不同的方法。
official Dropbox API v2 JavaScript SDK 和 this example 可能是一个很好的起点。
@Greg，事实上我就是从那里来的。该示例显示了如何上传物理文件，但我想即时上传图像。而且我似乎无法找到使用 v2 API 上传 blob 文件的示例。
filesUpload方法也可以直接取数据。例如，您可以传入一个字符串。如果遇到任何问题，请尝试并在代码中发布一个新问题。

标签： javascript dropbox-api

【解决方案1】：

希望这对将来的人有所帮助。

你需要这样的东西

var canvas = document.getElementById("paint");

然后

  function uploadFile() {
  var ACCESS_TOKEN = "xxx";
  var dbx = new Dropbox({
    accessToken: ACCESS_TOKEN
  });
  var fileInput = document.getElementById('file-upload');
  var file = fileInput.files[0];


  //Get data from canvas
  var imageSringData = canvas.toDataURL('image/png');
  //Convert it to an arraybuffer
  var imageData = _base64ToArrayBuffer(imageSringData);


  dbx.filesUpload({
      path: '/' + "test.png",
      contents: imageData
    })
    .then(function(response) {
      var results = document.getElementById('results');
      results.appendChild(document.createTextNode('File uploaded!'));
      console.log(response);
    })
    .catch(function(error) {
      console.error(error);
    });
  return false;
}



function _base64ToArrayBuffer(base64) {
  base64 = base64.split('data:image/png;base64,').join('');
  var binary_string = window.atob(base64),
    len = binary_string.length,
    bytes = new Uint8Array(len),
    i;

  for (i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes.buffer;
}

【讨论】：

我会极力避免在客户端放置任何访问令牌/api 密钥。