html5 上传压缩文件类型限制解决方案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/b7223058/article/details/79390302

需求场景：

利用input 上传文件，限制文件类型为zip,或者rar压缩包类型。

①尝试通过accept限制，发现除了zip和rar文件，excel，doc等文件也能选择。

②于是，解决方案是通过对文件名的判断，增加一层过滤，

代码如下

html代码：

au-upload(@change="changeCompress",accept="application/x-zip-compressed,application/x-rar-compressed",style="margin-bottom:5px;margin-left:5px",:loading="loading",ref="uploadCompress",button-text="选择压缩包")

js代码：

//压缩包选择改变

changeCompress($event) {

console.log('changeCompress');

let files = $event.target.files || $event.dataTransfer.files;

if (!files.length) {

Aurora.warning('请选择文件');

return;

}

let file = files[0];

//文件类型控制

let fileName = file.name;

let pos = fileName.lastIndexOf(".");

let lastName = fileName.substring(pos, fileName.length);

if ((lastName.toLowerCase() != ".zip" ) && (lastName.toLowerCase() != ".rar")) {

Aurora.warning("文件必须为.zip或.rar类型");

this.resetCompressData();

return;

}

if (file.size > 1024 * 1024 * 20) {

Aurora.warning('文件不能大于20M');

this.resetCompressData();

return;

}

this.form.compressFile = file;

},