Dropbox API 和使用 javascript 下载图像答案

【问题标题】：Dropbox API and downloading image with javascriptDropbox API 和使用 javascript 下载图像
【发布时间】：2016-04-20 02:28:44
【问题描述】：

我有这个问题，我使用 XMLHttpRequest 在 Dropbox 中获取我的文件，我的每个 POST 等都正常工作，但是当我检查我的响应/响应文本时看起来像这样：

"�PNG
↵↵
IHDR,,�"    pHYs��↵OiCCPPhotoshop ICC profilexڝSgTS�=���BK���KoR RB���&*!   J�!��Q�EEȠ�����Q,�↵��!���������{�kּ������>��������H3Q5��B�������.@�↵$p�d!s�#�~<<+"��x��M��0���B�\���t�8K�@z�B�@F���&S�`�cb�P-`'������{[�!�� e�Dh;��V�EX0fK�9�-0IWfH�����0Q��){`�##x��F�W<�+��*x��<�$9E�[-qWW.(�I+6aa�@.�y�2�4���������x����6��_-���"bb���ϫp@�t~��,/��;�m��%�h^�u��f�@����W�p�~<<E���������J�B[a�W}�g�_�W�l�~_�↵]2�v����HX}��sɤ��뾲*,9�4S���=3 _���Yijl���#[����g�M�{��OI�FԍΡ��
�7B|u���>w������7P!��Ïpp�p��ûoο�k~��!!BB� �!@B� �!@B��!!BB� �!@B� �!@B��!!BB� �!@B� �!@B��!!BB� �!@B� �!@BB� �!@B� �!@B��!!BB� �!@B� �!@B��!!BB� �!@B� �!@B���+�h+`/��!@B��!!BB� �!@B� �!@B��!�Z�oj�A   N�fJIEND�B`�"

我认为那是我的照片？那我怎么才能下载呢？

function showImage() {
    var foldersFiles = [];
    var data = {
        "path": "/path_to_my_file/mypicture.png"
    }

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        console.log(xhttp.responseText);
    }
  };
  xhttp.open("POST", "https://content.dropboxapi.com/2/files/download", true);
  xhttp.setRequestHeader("Authorization", "Bearer My_Access_Token");  
    xhttp.setRequestHeader("Dropbox-API-Arg", JSON.stringify(data));
  xhttp.send();
//    xhttp.send(data);
}

【问题讨论】：

我不确定你在问什么。看起来您已成功下载图像...接下来您想用它做什么？（到目前为止，您正在将其记录到控制台。）
@smarx 很高兴知道我目前做得对。我现在要做的是，如何“物理”获取文件？就像我调用 showImage 函数时一样，它会弹出我可以下载它的窗口。甚至以某种方式在网页上显示它？
设置xhttp.responseType='blob'或xhttp.responseType='arraybuffer'，然后搜索如何使用blob/arraybuffer作为src的img标签或使用文件API保存到本地磁盘。
如果你想下载文件，这个问题似乎很相关：stackoverflow.com/questions/13597516/…。如果你想显示图像，这个问题似乎很相关：stackoverflow.com/questions/8394721/…

标签： javascript xmlhttprequest dropbox dropbox-api

【解决方案1】：

这里有一些代码至少可以在某些浏览器中运行。具体来说，我相信下载部分根本无法在 IE 中运行。（我只在 Chrome 中进行了测试，这两种技术都有效。）

var token = '<REDACTED>';

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: '/test.png' }));
xhr.send();

【讨论】：

感谢您的回答。它就像魅力一样，正如你所说，这在 IE 上不起作用，至少在 IE 11 上不起作用，但目前我不需要它。