<el-upload ref="upload" multiple name="File" :action="apis.manageModel" :auto-upload="false" :limit="2" :http-request="httpRequest" :on-exceed = "cmx.fileOption.handleExceed" :on-change="cmx.fileOption.onChangeUpload" :before-remove="cmx.fileOption.beforeRemove" :before-upload="cmx.fileOption.beforeAvatarUpload" :file-list="newData.fileList" > <el-button size="small" type="primary">点击上传</el-button> <span slot="tip" class="el-upload__tip"> 只能上传一组同名dll及xml文件</span> </el-upload> //限制文件格式为dll .DLL .xml .XML beforeAvatarUpload(file) { let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);//获取文件后缀 const isDLL = fileName === "dll"; const isDLL1 = fileName === "DLL"; const isXML = fileName === "xml"; const isXML1 = fileName === "XML"; if (!isDLL &&!isDLL1 &&!isXML &&!isXML1 ) { this.$message.error( "上传文件只支持.dll、.DLL、.xml、.XML格式!" ); } return ( isDLL ||isDLL1 ||isXML ||isXML1 ); }, // 限制文件个数 handleExceed(files, fileList) { this.$message.warning(`请最多上传 ${this.limit} 个文件。`); }, // 限制上传两个同名文件且后缀不同的文件 onChangeUpload(file, fileList) { var temp = 0; fileList.forEach((item,idx) => { let fileName=file.name.substring(0,file.name.indexOf("."));//获取文件名 let itemName=item.name.substring(0,item.name.indexOf(".")); if (file.name === item.name) { temp++ if (temp === 2) { this.$message({ message: '请上传不同后缀的同名文件', type: 'info' }) fileList.splice(idx, 1) } } if (fileName!== itemName) { this.$message({ message: '请上传两个同名文件', type: 'info' }) fileList.splice(idx, 1) } }) }, // 移除文件 beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${file.name}？`); },到此这篇ElementUI 实现上传同名且后缀不同的两个文件的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/hd-yjs/11287.html