2017-06-24 27 views
3

我有保存使用Javascript在Dropbox的圖片一樣,如何獲得所有文件保存在Dropbox的我的HTML頁面

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來獲取所有的圖片,像這樣

$.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是在哪裏都是圖片

東西的文件夾可以幫助請

+1

您是否嘗試過向api提出GET請求? –

+0

是的。我曾嘗試過這樣的$ .ajax({「{」,方法:「GET」, url:「https://content.dropboxapi.com/1/files/auto/blackground」, dataType:「json」, ContentType: 「application/octet-stream」, 授權:「不記名令牌」 });我得到這個錯誤{錯誤:「身份驗證失敗」} 錯誤 : 「身份驗證失敗」 –

+0

@PrabodhM blackground是所有圖像的文件夾 –

回答

0

現在工作正常。我這樣做。令牌是我的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(); 
相關問題