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

如下所示：

<el-upload
 :action="uploadUrl"
 ref="upload"
 :multiple="false"
 :on-change="fileChange"
 :before-upload="beforeUpload"
 :on-success="handleAvatarSuccess"
 :on-preview="file_click"
 class="upload-demo"
 list-type="text"
 accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
 :file-list="uploadForm.personFileList"
 :auto-upload="false">
 <el-button size="small" type="primary">选择文件</el-button>
  <div slot="tip" class="el-upload__tip"><i class="el-icon-warning" style="color:red;margin-right:5px"></i>单个文件不超过5MB</div>
 </el-upload>

accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
//accept支持上传文件格式

以上这篇element UI upload组件上传附件格式限制方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在vue项目中使用element-ui的Upload上传组件的示例

    本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess&quo

  • 解决element UI 自定义传参的问题

    如下所示: <el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" ></el-autocomplete> 这里的 hanleSelect 默认绑定的参数是选中的那条数据. 但是如果一个页面有好几个相同的组件,要想知道选中的是第几个

  • Vue上传组件vue Simple Uploader的用法示例

    Vue上传组件vue Simple Uploader的用法示例

    在日常开发中经常会遇到文件上传的需求,vue-simple-uploader 就是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件,自带 UI,可覆盖.自定义:先来张动图看看效果: 其主要特点就是: 支持文件.多文件.文件夹上传 支持拖拽文件.文件夹上传 统一对待文件和文件夹,方便操作管理 可暂停.继续上传 错误处理 支持"快传",通过文件判断服务端是否已存在从而实现"快传" 上传队列管理,支持最大并发上传 分块上传 支持进度.预估剩

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

    如下所示: <el-upload :action="uploadUrl" ref="upload" :multiple="false" :on-change="fileChange" :before-upload="beforeUpload" :on-success="handleAvatarSuccess" :on-preview="file_click" c

  • ant design中upload组件上传大文件,显示进度条进度的实例

    Upload组件是自带上传进度,但是样式调起来很麻烦,我们要做的就是自定义一个 首先页面要引入组件 Upload, Progress uploadAttachmentsProps = { action: `/api/upload`, showUploadList: false, // 这里关闭自带的列表 beforeUpload: (info) => { /* 上传前的钩子,可以用来判断类型,和大小 if ('是否符合类型') { return false } if ('是否符合类型') { r

  • Vue+Element UI 实现视频上传功能

    Vue+Element UI 实现视频上传功能

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传API并返回URL. 二.具体实现 1.效果图展示 2.HTML代码 <div class="album albumvideo"> <div> <p class="type_title"> <span>视频介绍</spa

  • Vue Element UI + OSS实现上传文件功能

    Element提供了upload上传组件,可以查看官网upload组件的详细介绍:查看upload组件的上传源码upload/ajax,使用的是XHR对象上传文件.在项目实践中,发现该上传方法上传大文件时会出现问题,所以决定使用阿里云对象存储服务(Object Storage Service,简称OSS),OSS详细介绍可以查看官网,本文主要讲解的是OSS上传文件的前端,后台开发请查看官网介绍,SDK Browser.js讲解了前端如何进行上传. 1.使用npm安装SDK的开发包: npm in

  • antd Upload 文件上传的示例代码

    1.antd官网Upload组件: https://ant.design/components/upload-cn/ 2.下图是最近开发的上传文档的效果: 3.文件上传的实现: (1)方法一:antd默认上传. a:渲染文件上传组件.getPDFURL()方法为实现文件的上传.showUploadList为是否展示 uploadList, true显示,false不显示,其可设为一个对象,用于单独设定 showPreviewIcon 和 showRemoveIcon.type为上传按钮的图标.如

  • 用element的upload组件实现多图片上传和压缩的示例代码

    我用vuex做状态管理,七牛云做图床. 项目地址:多图片上传组件 效果展示 项目执行流程 首先,让我们来分析一下实现多图片上传的流程: 前端向后端请求用来上传图片至服务器的token 后端为每张要上传的图片生成一个图片名,并用这个图片名生成token 后端将图片名和token返回给前端 前端拿到token以后,将图片上传至服务器 上传成功以后,前端将图片名发给后端 后端将图片名存入数据库 项目实现过程 1.我们要利用element-ui的Upload组件布置界面: //upload.vue <e

  • vue中element 的upload组件发送请求给后端操作

    1.用到了before-upload属性, 用于在上传文件前的校验,并且发送请求给后端,传输格式进行文件流传输 什么都不用设置,action属性随便设置,不能为空即可! 在before-upload属性的方法中的代码如下: var _this = this; debugger; // var files=file.target.files[0]; debugger; const isJPG = file.type === "image/jpeg"; const isLt2M = fil

  • Asp无组件上传进度条解决方案

    一.无组件上传的原理我还是一点一点用一个实例来说明的吧,客户端HTML如下.要浏览上传附件,我们通过<input type="file">元素,但是一定要注意必须设置form的enctype属性为"multipart/form-data": <form method="post" action="upload.asp" enctype="multipart/form-data">&l

  • vue+springboot+element+vue-resource实现文件上传教程

    vue页面设置 <el-upload class="upload-demo" action="" :before-upload="beforeUpload" //上传前操作 :before-remove="beforeRemove" //移除钱操作 :multiple="false" //禁止多选 :http-request="myUpload" //文件上传,重写文件上传方法,a

  • Vue+UpLoad实现上传预览和删除图片的实践

    Vue+UpLoad实现上传预览和删除图片的实践

    1.用vue+Element完成一个图片上传.点图预览.加删除功能,如图: 2.首先我们再组件中引入这一段代码,每个属性的使用也都放在这里了: <el-upload class="upload-demo" action=""//引号里面填要上传的图片地址,用接口的话是公共的接口地址拼接一个图片的接口 :on-preview="handlePreview"//图片已经上传完成时点击触发(钩子函数) :on-remove="handl

随机推荐