利用Blob进行文件上传的完整步骤(2)

// file是要下载的文件（blob对象） downloadHandler: function (file, fileName) { let link = document.createElement('a') link.href = window.URL.createObjectURL(file) link.download = fileName link.click() window.URL.revokeObjectURL(link.href) if (navigator.userAgent.indexOf('Firefox') > -1) { const a = document.createElement('a') a.addEventListener('click', function (e) { a.download = fileName a.href = URL.createObjectURL(file) }) let e = document.createEvent('MouseEvents') e.initEvent('click', false, false) a.dispatchEvent(e) } }

在从后台获取的数据接口中把返回类型设置为blob

var x = new XMLHttpRequest(); x.responseType = 'blob'; // 返回一个blob对象

Blob URL和Data URL的区别

Blob URL

Data URL

Blob URL的长度一般比较短，但Data URL因为直接存储图片base64编码后的数据，往往很长，如上图所示，浏览器在显示Data URL时使用了省略号（…）。当显式大图片时，使用Blob URL能获取更好的可能性。

Blob URL可以方便的使用XMLHttpRequest获取源数据,比如设置XMLHttpRequest返回的数据类型为blob

Blob URL 只能在当前应用内部使用，把Blob URL复制到浏览器的地址栏中，是无法获取数据的。Data URL相比之下，就有很好的移植性，可以在任意浏览器中使用。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章: