Element-Ui入门教学——＜el-upload＞限制上传文件类型-编程知识

Element-Ui入门教学——＜el-upload＞限制上传文件类型

要限制<el-upload>上传文件的类型，需要给组件绑定:before-upload属性。
before-upload 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。

HTML代码

<template><el-uploadclass="upload-demo":before-upload = "checkFileType"  // 限制上传文件函数dragaccept=".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' || '.jpge' || '.png')){alert('请上传jpg、jpge或png的图片！');return false;}},}}   
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/169707.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！