vue中拼接图片地址但是图片路径有#(或者其他字符)怎么办

当在vue项目中碰到带有#图片路径(或者其他字符)怎么办

先看一个例子

//假设图片的路径是这个样的(但是需求的图片是最后面一个'/'
//后面的所有字符串才是图片地址然后用一个新的地址拼接去请求)
// 原本地址
let picsrc = 'https:xxx/xxx/xxx/47cbf4c89aa56#dnsakdnsakl#dsdsa 001.jpg'
console.log(picsrc) // https:xxx/xxx/xxx/47cbf4c89aa56#dnsakdnsakl#dsdsa 001.jpg

再来看我上面的需求是将最后面一个 ‘/’ 后面的所有字符串才是图片地址然后用一个新的地址拼接去请求

let fName = picsrc.substr(picsrc.lastIndexOf('/') + 1) // 截取最后一个 ‘/’ 后面的所有数据
console.log(fName) // 47cbf4c89aa56#dnsakdnsakl#dsdsa 001.jpg
// 用一个新的地址去请求
axios.get('http://localhost:3000/image?ObjNm=' + fName, (res) => {
  console.log(res)
})

那么结果如下

然后找错误找到这里：Request URL: http://localhost:3000/image?ObjNm=47cbf4c89aa56答案是在请
求的url地址中直接使用一些特殊字符，在服务器端接收的时候经常出现数据丢失的情况同时传递参数
时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。

处理方法进行字符转义

// 下面说到encodeURIComponent对应的解码
 axios.get('http://localhost:3000/image?ObjNm=' + encodeURIComponent(fName), (res) => {
   console.log(res)
 })

浏览器显示

备注：服务器是本地搭建node服务

js对文字进行编码涉及3个函数：escape,encodeURI,encodeURIComponent，
js相应3个解码函数：unescape,decodeURI,decodeURIComponent

方法介绍

escape 方法

escape 方法返回一个包含了 charstring 内容的字符串值（Unicode 格式）所有空格、标点、重音符号以及
其他非 ASCII 字符都用 %xx 编码代替，但是escape 方法不能够用来对统一资源标示码 (URI) 进行编码。
对其编码应使用 encodeURI 和encodeURIComponent 方法。

encodeURI 方法

将文本字符串编码为一个有效的统一资源标识符 (URI)。encodeURI 方法返回一个编码的 URI。如果您将编码结
果传递给 decodeURI，那么将返回初始的字符串。encodeURI 方法不会对下列字符进行编码：
":"、"/"、";" 和 "?"。请使用 encodeURIComponent 方法对这些字符进行编码。

encodeURIComponent 方法

将文本字符串编码为一个统一资源标识符 (URI) 的一个有效组件。encodeURIComponent 方法返回一个已编码
的 URI。如果您将编码结果传递给 decodeURIComponent，那么将返回初始的字符串。因为
 encodeURIComponent方法对所有的字符编码。但是有一点如果该字符串代表一个路径(vue路由路径举个例子)
例如 /home/Acccept/befau，其中的斜杠也将被编码