结合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;}};
}

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