如何将 Dropbox 中的所有文件保存到我的 HTML 页面

Question

我已经使用 Javascript 将图像保存在 Dropbox 中

document.forms.newsletter.addEventListener('submit', function 
     cb(evt) {
        //evt.preventDefault()

        // API key from here: https://dropbox.github.io/dropbox-api-v2-
          explorer/#files_upload
        // need to consider how this gets secured
        var TOKEN = ''      
        var dir = 'blackground/'
        var file = document.getElementById('file').files[0]     
        var promise = new Promise(function (resolve, reject) {

            // Dropbox requires application/octet-stream
            var xhr = new XMLHttpRequest();

            xhr.onload = function() {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.response));
                }
                else {
                    reject(xhr.response || 'Unable to upload file');
                } 
            };

            xhr.open('POST', 
           'https://content.dropboxapi.com/2/files/upload');
            xhr.setRequestHeader('Authorization', 'Bearer ' + TOKEN);
            xhr.setRequestHeader('Content-Type', 'application/octet-
          stream');
            xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({
                path: '/' + dir + file.name,
                mode: 'add',
                autorename: true,
                mute: false
            }));

            xhr.send(file);
        })

        promise
        .then(function (result) {
            // Save dropbox response to form
            document.getElementById('dropbox').value = 
       JSON.stringify(result)

            // Submit form on successful upload
            evt.target.submit()
        })
        .catch(function (err) {
            console.log('a');
        })

        return false
    })

它工作正常。但我想使用 Javascript 和 ajax 检索每个图像以在我的网页中显示它。怎么做到的？

我阅读了这份文档 https://www.dropbox.com/developers-v1/core/docs#files-GET，我们可以使用 Get Verb 实现它。

我已经为 API 创建了一个 Get 以像这样获取所有图像

$.ajax({
  method: "GET",
  url: "https://content.dropboxapi.com/1/files/auto/blackground",
  dataType: "json",
  ContentType:"application/octet-stream",
  Authorization:"Bearer token"
});

我收到这个错误

    {error: "Authentication failed"}
error
:
"Authentication failed"

blackground 是所有图片所在的文件夹

有什么可以帮忙的

Answer 1

现在可以正常使用了。我是这样做的。 Token 是我的 Dropbox 令牌。

var token = '';

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var imageUrl = (window.URL || window.webkitURL).createObjectURL(xhr.response);

        // display, assuming <img id="image"> somewhere
        document.getElementById('image').src = imageUrl;

        // download via the download attribute: limited browser support
        var a = document.createElement('a');
        //a.download = 'test.png';
        //a.href = imageUrl;
        //a.click();
    }
};
xhr.open('POST', 'https://content.dropboxapi.com/2/files/download');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({ path: '/blackground/blackground_logo.jpg' }));
xhr.send();

如何将 Dropbox 中的所有文件保存到我的 HTML 页面

How to get all Files Save in Dropbox to my HTML Page

javascript

ajax

dropbox