本地上传Excel文件前台格式校验

最新推荐文章于 2024-05-11 09:30:19 发布

原创最新推荐文章于 2024-05-11 09:30:19 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue.js

前台校验专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在前端实现的Excel文件格式校验方法，利用ElementUI组件库的上传组件结合JavaScript来确保上传的文件为xls或xlsx格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本地上传Excel文件前台格式校验

<el-upload action="/ordersetting/upload.do"
    name="excelFile"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <el-button type="primary">上传文件</el-button>
</el-upload>

这里使用的事Element UI文件上传空间。

:before-upload=“beforeUpload” ：文件上传前调用该方法，一般是执行对文件的格式校验

:on-success=“handleSuccess” ：文件上传成功后执行的方法，一般是做上传成功后的信息提示

//上传之前进行文件格式校验
beforeUpload(file){
    if (file.type != undefined){
        const isXLS = file.type === 'application/vnd.ms-excel';
        if(isXLS){
            return true;
        }
        const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (isXLSX) {
            return true;
        }
        this.$message.error('上传文件只能是xls或者xlsx格式!');
        return false;
    }else {
        var name = file.name;
        var first = name.lastIndexOf(".");
        var namelength = name.length;//取到文件名长度
        var filesuffix = name.substring(first + 1, namelength );//截取获得后缀名
        console.log(filesuffix);
        if (filesuffix != "xlsx" || filesuffix != "xls"){
            this.$message.error('上传文件只能是xls或者xlsx格式!');
            return false;
        }else {
            return true;
        }
    }
},
//上传成功提示
    handleSuccess(response, file) {
        if(response.flag){
            this.$message({
                message: response.message,
                type: 'success'
            });
        }else{
            this.$message.error(response.message);
        }
        console.log(response, file, fileList);
    },

只使用file.type进行对excel的校验，很可能会失效，所以要结合js对文件后缀的截取比对，才能保证上传文件的格式验证正确。