Element-Ui入门教学——<el-upload>限制上传文件类型
Element-Ui入门教学——限制上传文件类型。
文章共327字 · 阅读需要大约2分钟
一键AI生成摘要,助你高效阅读
问答
·
- 要限制<el-upload>上传文件的类型,需要给组件绑定:before-upload属性。
-
before-upload 可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传。 - HTML代码
-
<template> <el-upload class="upload-demo" :before-upload = "checkFileType" // 限制上传文件函数 drag accept=".png, .jpg, .jpeg" // 在选择文件时限制,但治标不治本 action="https://jsonplaceholder.typicode.com/posts/" :limit="1" // 限制上传文件数量 multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传jpg/jpeg/png文件,且不超过500kb</div> </el-upload> </template>
-
- JS代码
-
<script> export default { name: 'Upload', components: { }, methods:{ checkFileType(file){ const fileName = file.name; const fileType = fileName.substring(fileName.lastIndexOf('.')); if(fileType !== '.jpg' && fileType !== '.jpeg' && fileType !== '.png'){ alert('请上传jpg、jpge或png的图片!'); return false; } return true }, } } </script>
-
更多推荐
已为社区贡献3条内容
所有评论(0)