使用JavaScript API從Dropbox顯示圖像

Question

我正在嘗試創建一個頁面，該頁面可以通過Javascript API在Dropbox文件夾中顯示所有圖片。

我能夠正確設置我的保管箱應用程序，並且能夠獲取文件列表。

我被困在獲取URL的地方，實際上我可以用它來顯示HTML中的圖片。 我嘗試了以下代碼，以嘗試暫時獲取1張圖片的網址：

dbx.filesListFolder({path: ""})
    .then(function(response) {
        console.log(response);
        // ↑ this works!
        dbx.filesGetThumbnail({path: response.entries[0].path_display, format: "jpeg", size: "w64h64"})
            .then(function(result) {
                window.data = result;
                console.log(result);
            })
        // closures and rest of code...

檢查window.data或console.log(result) ，我似乎找不到可以在HTML中使用的任何URL。

有任何指向我正確方向的指示嗎？ 我還是Dropbox Javascript API的新手。

Answer 1

格雷格的榮譽

filesGetThumbnail方法本身不會返回縮略圖數據的URL。 它直接返回原始縮略圖數據。 如果您希望URL在瀏覽器中本地顯示，則可能需要執行以下操作：

dbx.filesGetThumbnail({"path": "/test.jpg"})
  .then(function(response) {
    var img = document.createElement('img');
    img.src=window.URL.createObjectURL(response.fileBlob);
    document.body.appendChild(img);
  })
  .catch(function(error) {
    console.log("got error:");
    console.log(error);
  });

順便說一句，您可以在此處找到所有API v2 JavaScript SDK方法。

Answer 2

對於其他人也有相同的問題：）現在，Dropbox JS Api代替返回base64圖像數據，因此您需要執行以下操作：

  var img = document.createElement('img');
  img.src = "data:image/jpg;base64, " + <data returned>;

data:image/jpg取決於您請求的圖像類型