element-ui upload组件上传文件类型限制

浅浅的花香味﹌ 2022-11-01 13:50 974阅读 0赞

<el-upload
        class="c-upload"
        ref="upload"
        :action="actions"
        :headers="myHeaders"
        :data="myData"
        :limit='limit'
        accept=".xls,.xlsx"
        :on-exceed="onExceed"
        :on-change="onChange"
        :on-success="onSuccess"
        :on-error="onError"
        :file-list="fileList"
        :before-upload="beforeUpload"
        :auto-upload="false"
    >
        <el-button
        　　slot="trigger"
        　　size="small"
        　　type="primary"
      　>选取文件</el-button>
      　<div
           slot="tip"
           class="el-upload__tip"
        >只能上传xls/xlsx文件，且不超过一个</div>
    </el-upload>

**解决办法：**

**上传之前:before-upload="beforeUpload"再次判断文件类型**

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 条评论，974人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue：使用elementUI upload组件上传excel文件

elementUI官方的upload组件文档可[点此查看][Link 1]。页面效果如下所示，支持文件的二次确认上传 ![在这里插入图片描述][watermark_t

╰半橙微兮°/ 2023年10月11日 12:39/ 0 赞/ 20 阅读

相关 ElementUI中el-upload中怎样限制上传文件的格式

场景使用el-upload上传文件时限制只能上传指定格式的文件。比如这里只允许上传apk格式的文件。注：博客： [https://blog.csdn.n

清疚/ 2023年10月05日 14:56/ 0 赞/ 17 阅读

相关 element UI upload组件上传附件格式限制方法

<el-upload :action="uploadUrl" ref="upload" :multiple="false" :o

- 日理万妓/ 2023年10月01日 18:58/ 0 赞/ 11 阅读

相关 elementui使用el-upload组件实现自定义上传

方式一：选择后自动上传使用 `http-request` 覆盖默认的上传行为，可以自定义上传的实现利用 `before-upload` 上传文件之前的钩子，参数为

小灰灰/ 2022年11月10日 05:40/ 0 赞/ 689 阅读

相关 element-ui upload组件上传文件类型限制

<el-upload class="c-upload" ref="upload" :action="actions"

浅浅的花香味﹌/ 2022年11月01日 13:50/ 0 赞/ 975 阅读

相关解决elementui＞Upload组件＞before-upload钩子返回false时，文件仍然上传成功的问题

在使用Upload 上传（通过点击或者拖拽上传文件），其实还是有些小坑的，如果我们在before-upload中直接返回true或者是false，那么它其实也是会上传文件的

待我称王封你为后i/ 2022年10月28日 03:47/ 0 赞/ 308 阅读

相关 ElementUI 上传文件以及限制

一、概述现有项目中，涉及文件上传。要求： 1. 文件必须是excel 2. 只能上传1个文件 3. 文件大小不能超过5M 二、Upload 上传注意：

小鱼儿/ 2022年10月27日 15:59/ 0 赞/ 899 阅读

相关 elementUI——upload限制图片或者文件只能上传一个——功能实现

最近在写后台管理系统时，遇到一个需求，就是上传图片，有且仅能上传一张。效果图如下： ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZm

你的名字/ 2022年09月16日 11:20/ 1 赞/ 1980 阅读

相关 Element-upload手动上传文件以及限制文件类型及大小

Element-upload手动上传文件以及限制文件类型及大小根据项目需求只能把上传功能做成手动上传 ![在这里插入图片描述][watermark_type_

Bertha 。/ 2022年08月29日 10:26/ 0 赞/ 426 阅读

相关 ElementUI的el-upload 文件上传

今天写项目用到了el-upload，整个控件功能很强大。我的需求，前端点击上传，径图片保存到指定的文件夹，然后，获得保存后的路径返回给前端，赋值给user.image，之

喜欢ヅ旅行/ 2022年05月18日 01:10/ 0 赞/ 440 阅读