最近开发的时候被分到了这个需求,要求我上传文件后接收其传回来的图片并展示,上传文件不难,轻松解决,但是以前没处理过图像的请求,所以遇到了这个问题,后端是怎么传过来的?我该怎么接收呢?
首先,我问了后端同学,他说会传个二进制数据流过来。我输出显示后发现是一坨乱码,看不出是什么:
好了,新问题,这个二进制数据流怎么变成图片?为此我上网搜索了一下相关资料,找了一段处理二进制流的代码,原理是将二进制流转成BLOB对象,然后使用window.URL.createObjectURL()方法生成了一个临时的图片URL(imgUrl),用于在前端显示图片:
axios.post(uploadUrl, formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
}).then(response => {
const imgUrl = window.URL.createObjectURL(new Blob([response.data]));
this.imgSrc = imgUrl;
}).catch(error => {
console.error('Error:', error);
});
大致步骤如上,会得出一个blob地址:
经过测试后发现不行,显示为无效地址……
为啥呢?搞不懂,但是看了一下网络请求发现浏览器能预览得到我要的图片!
我就更懵了,于是跑去问大佬,大佬说我没加response的格式为blob格式导致的错误,但是我转念一想,我在代码中不是后面对响应结果进行转blob了吗?于是又问了大佬,大佬说,如果你在请求的时候不加responseType: "blob",那么在网络请求中,浏览器默认将响应数据解析为文本数据(String),浏览器会将响应数据解析为文本,即使你使用new Blob([response.data])创建Blob对象,仍然是基于文本数据创建的Blob对象,而不是原始的二进制数据。
原来如此,哪怕我转成了blob对象,也是浏览器默认加工后的一串字符串转化为的blob,接收到的那一刻就是一个没有意义的字符串,也无法恢复成原本的二进制数据流了,自然无法转化为浏览器临时的图片资源 。
最后我加上了响应类型,再试一次:
axios.post(uploadUrl, formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
responseType: "blob",
}).then(response => {
//处理response
const url = window.URL || window.webkitURL;
const imgUrl = url.createObjectURL(response.data);
this.imgSrc = imgUrl;
}).catch(error => {
console.error('Error:', error);
});
成功了!
这次经历给我带来的经验就是在进行网络请求的时候最好设置一下响应格式:
在axios中,responseType选项有以下几种形式,每种形式代表的数据类型如下:
1. arraybuffer:表示响应的数据是一个包含二进制数据的ArrayBuffer。
2. blob:表示响应的数据是一个Blob对象,通常用于处理文件数据。
3. document:表示响应的数据是一个HTML Document对象。
4. json:表示响应的数据是一个JSON对象。
5. text:表示响应的数据是纯文本字符串。
所以,不管啥类型都最好要设置他的相应格式,不然浏览器会默认为转字符串,到时候代码接收到的就可能不是我们想要的东西了