element-uiupload组件上传文件类型限制

tech2023-02-13  109

需求: 文件上传类型指定accept 后还需要进行指定判断大小或文件类型 但是我们发现原来的已经不能满足我们的需求,这个时候我们需要在文件上传的时候进行判断

代码如下:

<!-- 图片上传 --> <el-popover placement="bottom-start" width="450" trigger="click"> <div style="height:300px;"> <el-upload class="u_img" :action="uploadbimg" :headers="Myhead" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="beforeUpload_u" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" accept=".zip" > <el-button type="primary">图片压缩包上传</el-button> <div slot="tip" class="el-upload__tip">只能上传zip格式文件,且不超过800kb</div> </el-upload> </div> <el-button type="primary" slot="reference">图片上传</el-button> </el-popover> <!-- 图片上传 --> beforeUpload_u(file, fileList){ var testmsg=file.name.substring(file.name.lastIndexOf('.')+1) const extension = testmsg === 'zip' var bool = false; if(extension){ bool = true; } else{ bool = false; } if(!extension) { this.$confirm(`上传文件只能是zip格式!`); } return bool; },

如果要判断文件的大小也是可以的 下面注释的是文件的大小判断

beforeUpload(file) { console.log(file) var testmsg=file.name.substring(file.name.lastIndexOf('.')+1) const extension = testmsg === 'xls' const extension2 = testmsg === 'xlsx' // const isLt2M = file.size / 1024 / 1024 < 10 if(!extension && !extension2) { this.$message({ message: '上传文件只能是 xls、xlsx格式!', type: 'warning' }); } // if(!isLt2M) { // this.$message({ // message: '上传文件大小不能超过 10MB!', // type: 'warning' // }); // } // return (extension || extension2) && isLt2M return extension || extension2 }
最新回复(0)