一、起因
需要做一个上传文件的功能，但是对于上传的文件，比如上传头像，这个用户无需知道文件名的，那么我们的文件名最后都是不要存在中文，因为如果存在中文的话，可能需要进行url编码，如果没有进url编码的话，可能会带来额外的麻烦，比如存储cookie时，浏览器会自动把你的url地址中的中文进行url编码，这样你取出来的地址需要解码才能请求网络数据。
关于url编码可以看看我的这一篇文章：JS对url编码解码，或者自查其他资源了解。
二、解决
// 生成唯一id function getUniqueID(){//生成11位随机的36进制id+上时间戳的36进制 return (Math.random().toString(36).substr(2))+Date.now().toString(36) } // 过滤文件名称的中文及特殊字符 function filter_fileNameStr(fileName){ console.log("fileName:",fileName) var suffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)//后缀名 console.log("后缀suffix:",suffix) prefix = fileName.substring(0, fileName.lastIndexOf('.'))//截取后缀名之前的字符,以便于后面做字符处理 前缀名 console.log("前缀prefix:",prefix) var reg = /^[u4e00-u9fa5()_a-zA-Z0-9]+$/ //匹配中英文字符用于过滤特殊字符 var reg_filterSpecial = /[^u4e00-u9fa5()_a-zA-Z0-9]+/g //匹配非中英文的特殊字符,过滤特殊字符 var reg_cn = /[u4e00-u9fa5()]+/g //匹配中文字符用于过滤中文字符 if(!reg.test(prefix)) {//匹配非所有中英文字符, console.log("图片含有特殊字符,开始过滤特殊字符,过滤前 前缀名称：",prefix) prefix = prefix.replace(reg_filterSpecial, '')//有特殊字符,则替换为空 console.log("图片含有特殊字符,处理图片名称,过滤后 前缀名称：",prefix) } if(reg_cn.test(prefix)) {//匹配所有中英文字符,如果图片有中文字符,则替换为空 console.log("图片含有中文,开始过滤中文,过滤前 前缀名称：",prefix) prefix = prefix.replace(reg_cn, '')//有中文字符,则替换为空 console.log("图片含有中文,处理图片名称,过滤后 前缀名称：",prefix) } fileName = prefix+'_weteach_'+(getUniqueID().slice(1,10)) + suffix;//前缀加上唯一ID加上后缀名,重新命名完成 weteach是我作品的名称 return fileName; }
测试代码：
let fileNameArr = ['hmyield.jpg','123.docs','hu*/-+*`.jpg','胡绵源.png','666.doc'] for(let i in fileNameArr){//for...in时 i 的值是数组的下标，并且其中i的值是字符串。 console.log("第"+(parseInt(i)+1)+'个文件处理开始————————————————————————————') let newname = filter_fileNameStr(fileNameArr[i]) console.log("第"+(parseInt(i)+1)+"个文件处理后名称为：",newname) console.log("第"+(parseInt(i)+1)+'个文件处理结束————————————————————————————') console.log('') }
运行结果：(运行结果有个问题，就是应该把打印中的 ‘图片’ 改为’文件‘，才符合主题，懒得改了，主要是思路)
第1个文件处理开始———————————————————————————— fileName: hmyield.jpg 后缀suffix: .jpg 前缀prefix: hmyield 第1个文件处理后名称为： hmyield_weteach_trqss4rsz.jpg 第1个文件处理结束———————————————————————————— 第2个文件处理开始———————————————————————————— fileName: 123.docs 后缀suffix: .docs 前缀prefix: 123 第2个文件处理后名称为： 123_weteach_wks0yxoie.docs 第2个文件处理结束———————————————————————————— 第3个文件处理开始———————————————————————————— fileName: hu*/-+*`.jpg 后缀suffix: .jpg 前缀prefix: hu*/-+*` 图片含有特殊字符,开始过滤特殊字符,过滤前 前缀名称： hu*/-+*` 图片含有特殊字符,处理图片名称,过滤后 前缀名称： hu 第3个文件处理后名称为： hu_weteach_sj7fc8co5.jpg 第3个文件处理结束———————————————————————————— 第4个文件处理开始———————————————————————————— fileName: 胡绵源.png 后缀suffix: .png 前缀prefix: 胡绵源 图片含有中文,开始过滤中文,过滤前 前缀名称： 胡绵源 图片含有中文,处理图片名称,过滤后 前缀名称： 第4个文件处理后名称为： _weteach_1iij0ll81.png 第4个文件处理结束———————————————————————————— 第5个文件处理开始———————————————————————————— fileName: 666.doc 后缀suffix: .doc 前缀prefix: 666 第5个文件处理后名称为： 666_weteach_3htsw8m1c.doc 第5个文件处理结束————————————————————————————