结合el-upload上传组件，验证文件格式及大小

结合el-upload上传组件，验证文件格式及大小

效果如下：

代码如下：
upgradeFirmwareInfo.vue页面

<template>
    <div>
        <el-dialog 
        title="新增固件升级包" 
        :visible.sync="dialogFormVisible"
        top="7vh" 
        width="760px"
        class="commonDialog" 
        :close-on-click-modal="false">
            <el-form :model="firmwareUpgradePackForm" :rules="rules" ref="firmwareUpgradePackForm">
                <el-form-item prop="fileUrl" class="m-l15">
                    <el-upload
                        :limit="1"
                        ref="upload"
                        action
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-change="handleChange"
                        :file-list="selectedFileList"
                        :on-exceed="handleExceed"
                        :auto-upload="false">  
                        <el-button slot="trigger" class="btn-rectangle btn-darkGreen">上传文件</el-button>
                        <el-tooltip class="item m-r10" effect="dark" placement="right">
                            <div slot="content">注意：只能上传一个文件，文件大小不能超过2G，且文件格式必须为zip或bin</div>
                            <i class="el-icon-question el-icon--right stateDesRed font-16"></i>
                        </el-tooltip>
                    </el-upload>
                </el-form-item>
                <el-form-item prop="fileSize" label="固件大小" :label-width="formLabelWidth">
                    <div class="f-r">
                        <el-input v-model="firmwareUpgradePackForm.fileSize" autocomplete="off" :disabled="true"></el-input>
                        <span class="m-l2">{{firmwareUpgradePackForm.fileSizeUnit}}</span>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="btn-rectangle btn-darkGreen" @click="submitAddForm('firmwareUpgradePackForm')">确定</el-button>
                <el-button class="btn-rectangle btn-grey" @click="cancelForm()">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Consts from "../../../../../public/constants/commonConsts";
export default {
    components: {},
    data() {
        let validateFileUrl = (rule, value, callback) => {
            if (this.selectedFileList.length<=0) {
                callback(new Error("请上传文件"));
            }
            else {
                callback();
            }
        };
        return {
            dialogFormVisible: true,
            firmwareUpgradePackForm: {
                fileSize:null,
                fileSizeUnit:"B",
                fileUrl:""
            },
            rules: {
                fileSize:[
                    { required: true, message:"请输入固件大小", trigger: "blur"}
                ],
                fileUrl: [
                    { min: 1, max: 1000, message: "最多只能输入1000个字符", trigger: "blur" },
                    { required: true,  validator: validateFileUrl, trigger: "blur" }
                ]
            },
            formLabelWidth:"90px",

            selectedFileList: [],
            fileContent:'',
        }
    },
    mounted() {},
    methods: {
        //选取文件
        handleChange(file, fileList) {
            console.log(file);
            console.log(fileList);

            //验证文件类型
            let fileTypeLimitList = ["zip","bin"];
            let verifyFormatValue = Consts.verifyFileFormat(file.raw, fileTypeLimitList);
            if(!verifyFormatValue){
                this.selectedFileList = [];
                this.fileContent = "";
                return false;
            }

            //验证文件大小
            let verifySizeValue_zero = Consts.verifyFileSize_zero(file.raw);
            if(!verifySizeValue_zero){
                this.selectedFileList = [];
                this.fileContent = "";
                return false;
            }
            let verifySizeValue = Consts.verifyFileSize(file.raw, 2,"G");
            if(!verifySizeValue){
                this.selectedFileList = [];
                this.fileContent = "";
                return false;
            }

            this.fileContent = "";
            this.selectedFileList = [];
            this.fileContent = file.raw;
        },

        //当上传的升级包超出个数限制时钩子函数
        handleExceed(files, fileList) {
            console.log(files);
            console.log(fileList);
            console.log(this.selectedFileList);
            
            let newFile = files[0];

            //验证文件类型
            let fileTypeLimitList = ["zip","bin"];
            let verifyFormatValue = Consts.verifyFileFormat(newFile, fileTypeLimitList);
            if(!verifyFormatValue){
                this.selectedFileList = [];
                this.fileContent = "";
                return false;
            }

            //验证文件大小
            let verifySizeValue_zero = Consts.verifyFileSize_zero(newFile);
            if(!verifySizeValue_zero){
                this.selectedFileList = [];
                this.fileContent = "";
                return false;
            }
            let verifySizeValue = Consts.verifyFileSize(newFile, 2,"G");
            if(!verifySizeValue){
                this.selectedFileList = [];
                this.fileContent = "";
                return false;
            }

            this.fileContent = "";
            this.selectedFileList = [];
            this.fileContent = newFile;
        },

        //移除上传文件包
        handleRemove(file, fileList) {
            this.fileContent = "";
            this.selectedFileList = [];
            this.firmwareUpgradePackForm.fileSize = null;
            this.firmwareUpgradePackForm.fileSizeUnit = "B";
            this.firmwareUpgradePackForm.fileUrl = "";
        },

        //点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据，类似查看文件具体内容(暂时未使用)
        handlePreview(file) {
            console.log(file);
        },

        //保存新增固件升级包
        submitAddForm(formName) {
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    //可根据自己的需求继续往下...
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },

        cancelForm(){
            this.dialogFormVisible = false;
        }
    }
}
</script>

<style lang='less' scoped>

</style>

引入的commonConsts.js

export default class Consts {
    /**
	 * 验证上传附件大小(支持G、M、K、B)
	 * @param file
     * @param maxSize
     * @param unit
	 * @return
	 */
     static verifyFileSize(file, maxSize, unit) {
        let limitResult = false;
        if(unit=="G"){
            limitResult = file.size / 1024 / 1024/ 1024 < maxSize;
        }
        if(unit=="M"){
            limitResult = file.size / 1024 / 1024 < maxSize;
        }
        if(unit=="K"){
            limitResult = file.size / 1024 < maxSize;
        }
        if(unit=="B"){
            limitResult = file.size < maxSize;
        }
        if (!limitResult) {
            Message({
                message: '上传文件大小不能超过'+maxSize+unit,
                type: 'error'
            })
            return false;
        }
        else{
            return true;
        }
    };

    /**
	 * 验证上传附件大小为0
	 * @param file
	 * @return
	 */
     static verifyFileSize_zero(file) {
        if (file.size == 0) {
            Message({
                message: "上传文件大小为0",
                type: 'error'
            })
            return false;
        }
        else{
            return true;
        }
    };

    /**
	 * 验证上传附件格式
	 * @param file
     * @param fileTypeLimitList
	 * @return
	 */
     static verifyFileFormat(file, fileTypeLimitList) {
        let fileNameList = file.name.split('.'); 
        let lastIndex = fileNameList.length - 1;
        let currentFilType = fileNameList[lastIndex].toLowerCase();

        let findResult = fileTypeLimitList.find(item => item === currentFilType);
        if(findResult == undefined){
            let tip = "";
            fileTypeLimitList.forEach((item,index) => {
                if(index == 0){
                    tip = item;
                }
                else{
                    tip = tip + "、" +item;
                }
            });
            Message({
                message: '上传文件只能是'+tip+'格式',
                type: 'error'
            })
            return false;
        }
        else{
            return true;
        }
    };
}

如有漏洞，欢迎宝子互动指教！！！！！！！！！！！！！