FileReader从浏览器窗口拖动图像

Question

我有一个div,用户可以拖放图像然后,使用FileReader,我得到图像的base64.工作良好.

dropper.ondrop = function (e) {

    e.preventDefault();

    var file = e.dataTransfer.files[0];

    var reader = new FileReader();
    reader.readAsDataURL(file);
};

我的问题是,如果我打开浏览器窗口并从浏览器拖放图像,我会收到错误:

Failed to execute 'readAsDataURL' on 'FileReader': 
parameter 1 is not of type 'Blob'.

现在,是否有任何转变来从浏览器窗口拖动图像的base64？

最终,是否有办法获取图像URL,然后是服务器端卷曲请求的实际base64？

任何的想法？

Answer 1

第一个参数使用“http://”或“https://”协议，而不是预期的“file://”协议。这就是为什么您无法使用HTML5 FILE API读取它，因此您可能需要先下载并保存文件，然后再尝试读取内容。另一方面，您可以使用检索到的 url 更新 img 标签的 src 属性，并跳过 readDataAsUrl() 部分来热链接图像。