这是在我的开源项目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函数进行转码传递。
文章评论