记一个JS获取base64编码地址图片传到后台时无法识别的坑

oy2022-06-22技术研究402

事情是这样的,前端一个DIV用了属性加上图片背景,比如

<div class="posterbox" style="background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAhIQg//2Q=="); background-position: center center; background-size: cover;"></div>

中间一长串的base64编码我就省略不写了


下面用JS来获取这串base64数值

// 获取元素的属性值
var img_base64 = $('.posterbox').css('background-image');
// console.log(img_base64);  显示:url("data:image/jpeg;base64,/9j/4AXXXXXX==")

// split分割取出上面属性中url()中间的base64
img_base64 = img_base64.split('(')[1].split(')')[0];


到此时img_base64变量就是这个base64的字符串,POST到后台,发现不是有效的base64字符串无法转储为图片。查看提交的数据,确实是包含此base64字符串的,同时打印出后端所接收到的字符串和前端一致,是合法完整的base64编码:

微信截图_20220622044716.png

查了很多百度的资料,说是base64编码在post过程中部分符号会被转义,前端要先urlencode,后端再decode。试过无效。


最后发现,原因竟然是在前端提交控制台所显示的base64字符串前后双引号"",不是代表这是字符串类型,而是真的有这个符号提交到后端。而后端var_dump()打印字符串的时候刚好也带有这个符号,看上去是相同的,这就是最坑的地方……


把双引号去掉,修改上述取url()中间base64部分的代码为:

img_base64 = img_base64.split('("')[1].split('")')[0];


最后再次提交,base64字符串没有双引号了,问题解决!

微信截图_20220622045302.png


之前在取img标签src为base64字符串的图片地址时无此问题,因为直接获取元素src的地址就可以了,没有双引号问题,这个url()地址是有双引号的,浪费我2个小时时间,我是真的是会谢。

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。