这是在我的开源项目r_pan新版本开发过程中,遇到的一个问题。特此记录。
问题
问题是这样的,我在自己开发了文件预览后端接口后,就弃用了之前通过Nginx搭建的静态资源转发的解决方案。在测试过程过程中,发现其他的类型文件还好,Office文件的预览总是出问题。
经查找原因,发现我的URL拼接后是这样的:https://view.officeapps.live.com/op/view.aspx?src=https://pan.rubinchu.com/preview?...。这就很奇怪了,因为我明明用encodeURI()函数来转码了,但是显示效果还是上面那样,这样的话预览接口的参数传递就会有问题,而导致你预览失败。
解决方案
产生这个问题的原因还是自己对于js的了解程度不够,以为encodeURI就能解决url参数传递过程中的格式问题。解决方案就是把自己的预览链接使用escape()函数或者encodeURIComponent()函数编码。
经查资料,js对于url的编码和解码有三种处理函数:
- escape 和 unescape。
- encodeURI 和 decodeURI。
- encodeURIComponent 和 decodeURIComponentescape。
escape 和 unescape
eacape函数的主要作用是将给定的字符串转换为Unicode编码值。它会所有的空格符、标点符号、特殊字符等等非ASCII的字符全部转化为%xx格式的字符编码。
escape不编码的字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z。
encodeURI 和 decodeURI
encodeURI函数的主要作用是将URL字符串使用UTF8编码来转换为Unicode编码值。它的常规用法是转换URL中的中文。
encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z。
encodeURIComponent 和 decodeURIComponentescape
encodeURIComponent函数和encodeURI不同的是,它会对URL中的整体使用UTF8编码格式来进行编码。也就是说,在encodeURI中不编码的!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~字符都会被编码转换。
总结
我们在遇到URL传参问题时,首先要考虑使用encodeURIComponent函数进行转码传递。
文章评论