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

原创已于 2023-12-07 09:32:11 修改 · 6.1k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript

于 2023-11-10 19:05:06 首次发布

vue 专栏收录该内容

7 篇文章

订阅专栏

文章介绍了如何在Vue的ElementUI组件<el-upload>中使用before-upload属性来限制上传文件类型，仅允许.jpg,.jpeg,.png格式，通过JavaScript函数实现验证。

要限制<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>