关于附件上传文件名包含特殊字符引起无发下载附件的问题解决办法

本文介绍了如何使用JavaScript处理文件名中的特殊字符,包括排除法、定义法和替换法三种方法,并探讨了允许用户上传包含特殊字符文件时的技术方案。

(1)不容许用户上传包含特殊字符的文件 在上传文件的时候,加上必要的效验;这个比较简单,改动量小。

另外文件名包含特殊字符的文件,比较少,原因是无法从键盘输入特殊字符!

JS校验方法举例:

方法1:排除法

function containSpecial( str )    
{    
    var containSpecial = RegExp(/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/);    
    return ( containSpecial.test(str) );    
}  

str=fileName,返回True就表示包含特殊字符!      

方法2:定义法

function dosub(){
    var s = document.getElementById("t").value;
    var i = /[0-9]+/;
    var str = /[A-Za-z]/;
    var spec=/[,.<>{}~!@#$%^&*]/;
   
    if(!str.test(s)){
       alert("必须包含字母");
    }
    if(!i.test(s)){
       alert("必须包含数字");
    }
    if(!spec.test(s)){
       alert("必须包含特殊字符。例如:!@#$%^&* 其中一个或多个");
    }
 
 }
方法3:替换法

1.替换所有要替换字符

var str = "$Hello World!$Hello World!$Hello World!";
//把所有的“Hello World!”替换为“Welcome you!”。“/g”是替换全部。
alert(str.replace(/Hello World!/g,"Welcome you!"));
2.替换所有要替换的特殊字符。
var str = "$Hello World!$Hello World!$Hello World!";
//利用正则表达式把所有的“$”替换为“#”。“$”为特殊字符,所以前面要加“\\”。
var regS = new RegExp("\\$","g");
alert(str.replace(regS,"#"));

(2)1. 容许用户上传此类文件 凡是上传下载附件的地方,都需要修改,而且数据库中的记录也需要修改,工作量很大大!具体做法如下:

A. 附件保存的时候,对相关的字段进行转码,如下:


B. 附件下载的时候,对相关的字符进行解码,如下:


在 Vue2 中,当附件下载文件名包含特殊字符时,可参考以下前端转码方法。若使用 `content-disposition` 来获取文件名,其值为 `attachment;filename=xxx.xlsx` 类型的字符串,需自行切分。当文件名含中文等特殊字符时,后端需配合转码,在送文件时,将文件名进行 `java.net.URLEncoder.encode(fileName, &ldquo;UTF8&rdquo;)` 转码,否则前端接收到的 `res.headers[&#39;content-disposition&#39;]` 中的中文信息会乱码。后端转码后,前端通过 `decodeURIComponent` 解码即可 [^1]。 以下是使用 axios 起请求下载文件时处理文件名的代码示例: ```javascript var urls = xxxxxApi; // 下载接口 axios({ url: urls, method: &quot;post&quot;, responseType: &quot;blob&quot;, params: xxxxParams // 此处写后端需要的参数 }) .then((res) =&gt; { let stringName = res.headers[&quot;content-disposition&quot;].split(&quot;@&quot;)[1]; // 一般来说,文件名字后端都在返回头里,前后端可以约定文件名前用 @ 符号分隔,便于取值,用其他符号也可以 let fileNameEnd = stringName.split(&quot;.&quot;)[1]; // 获取到了后缀 let fileName = stringName.split(&quot;.&quot;)[0]; // 获取到文件名(不含后缀) // decodeURIComponent(fileName) ,一般来说后端返回的字没有转码,需要前端解码 utf - 8,如果后端转了,就不用转 let endFileName = `${decodeURIComponent(fileName) + &quot;.&quot; + fileNameEnd}`; let blob = new Blob([res.data], { type: &quot;application/zip&quot; }); // application/zip 就是设置下载类型,需要设置什么类型可在标题二处查看 const url = window.URL.createObjectURL(blob); // 设置路径 const link = window.document.createElement(&quot;a&quot;); // 创建 a 标签 link.href = url; link.setAttribute(&quot;download&quot;, endFileName); // 给下载后的文件命 link.style.display = &quot;none&quot;; link.click(); URL.revokeObjectURL(url); // 释放内存 }) .catch((resp) =&gt; { // 关闭遮罩层 }); ``` 在这个示例中,通过 `decodeURIComponent` 对文件名进行解码,确保包含特殊字符文件名能正确显示 [^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值