blob和fileReader如何使用,是什么关系
直接给文件地址会有安全隐患吗?一般是如何处理文件地址的。
前端下载的几种方式,总结一下就是,如果返回的文件格式浏览器不能识别,浏览器就会下载。如果后端处理了响应头Content-Disposition: attachment; filename="filename.xls" ,那也可以下载。
但是还有一种情况,浏览器可以识别的文件格式,后端也没有设置下载的响应头,需要前端自己处理下载的情况。
后端传的是二进制流,前端应该如何通过blob处理二进制文件流格式流,并实现前端下载文件流格式
1.加和不加responseType: 'blob'的区别
前提:axios请求图片下载地址
function handleDownload() {
axios({
url: 'http://localhost:3001/saveImg',
// responseType: 'blob',//axios请求配置中设置和不设置responseType
method: 'get'
})
.then(data => {
console.log(data)
const blog = new Blob([data.data], {
type: 'image/jpeg'
}) // 将data数据转为blob对象
const url = window.URL.createObjectURL(blog) // 将blob对象转为blob地址
console.log(url)
// 创建DOM实现下载
// let a = document.createElement('a')
// a.download = 'img01.jpg'
// a.href = url
// a.click()
}).catch(err => {
console.error(err)
})
}
结果
responseType如果不设置,默认值是JSON。从结果来看,responsetype的值不同,axios会对响应的数据进行响应的转换。