el-upload

获取el-disable弹框 中，el-upload对象，并清空列表，始终无法获取到ref的原因

点击上传只能上传不超过2MB的图片点击上传只能上传不超过10MB的视频确定取消以上是弹框内容，但是如果弹框的open为false那么就会导致无法获取ref属性。所以如果想要清空el-uplload上传列表，需要将el-disable弹框显示出来后也就是open=true的时候，再去通过this.$refs.uploadVideoModel.clearFiles();去清空上传列表。代码如下：点击新
内心的一片海·2023-12-18 16:41

vue3.2结合element-plus自定义上传组件

感觉el-upload自定义也没合适的文档，想自定义处理事件和处理文件的时候不方便。所以研究了一下。
林中伊人·2023-12-18 07:48

el-upload组件自定义上传

最近在使用element-ui框架，但是遇到后端同学要求附带参数需要随着文件的变化而变化，然后用el-upload在before-upload钩子里面进行判断更新，但是实际使用的效果不太理想，附带参数总是慢半拍
大脸猫_2e21·2023-12-17 19:51

通过el-upload同时上传表单和文件

通过el-upload同时上传表单和文件上传前，el-upload组件选哟设置on-change，在上传时检测是文件是否符合标准（格式、大小），不符合标准在fileLIst中删去并用$message弹出错误关闭
李大壮BigStrong·2023-12-16 17:44

vue3封装表单组件,不能触发element-plus的form/form-item的验证事件，解决办法

这里就拿一个图片上传组件做例子：（这里是在el-upload上做二次封装）ImageUpload.vue使用最简单需求：我们在上传图片后，需要自动触发表单的validate验证，上传后，要去掉已
搬代码的农民·2023-12-16 17:31

vue中el-upload结合vuedraggable实现图片的上传、排序、删除以及预览等功能

实现效果：功能实现：要实现图片的拖拽功能首先需要安装vuedraggable库npminstallvuedraggable--save在组件中引入并注册vuedraggableimportdraggablefrom"vuedraggable";exportdefault{//注册组件components:{draggable,},data(){return{}}}使用elementui的el-up
阁下何不同风起？·2023-12-16 04:20

element-plus的el-upload上传图片

上传一张图片后隐藏上传按钮，添加删除和预览，然后把图片变成base64，在整个form进行提交的时候，先把图片进行上传，在进行提交，以及修改的时候进行回显首先是htmlbase64的方法uploadImgToBase64(file){//核心方法，将图片转成base64字符串形式returnnewPromise((resolve,reject)=>{constreader=newFileReade
加油，前进·2023-12-15 20:47

element上传照片（el-upload 超简单）

element上传附件（el-upload超详细）经常会有人问我上传照片怎么做，这个功能其实比较常见的功能，后台管理系统基本上都有，这就离不开element的el-upload，我们慢慢看，先看结构代码
学而时习之不亦说乎。·2023-12-14 16:26

el-upload 附加json数据

对于el-upload（ElementUI的上传组件）来说，如果要在上传过程中添加JSON数据，可以通过自定义事件或者使用FormData属性来完成。
xixiyuguang·2023-12-14 16:14

Vue3&el-upload 实现在组建之外提供一个上传按钮

有这么一个需求，在使用el-upload组件进行文件上传的时候，除了组件默认提供的上传按钮，还要在列表的最前面自定义的加一个上传按钮，点击这个自定义的上传按钮要实现和点击默认的上传按钮同样的全套的上传流程默认的
亲爱的非洲野猪·2023-12-14 14:27

【vue2+element-ui】el-upload封装多图上传组件

halo小伙伴们，在开发表单中会有遇到需要多图上传，可动态限制上传的图片数量、大小，支持删除、显示提示语的需求。在这小编带来一个小编自封装用了很久的多图上传组件，话不多说上代码。首先创建一个如：XUploadImgList.vue的文件，编写如下：支持上传jpg/png格式图片,单个图片不能超过{{maxSize}}M,最多上传{{limit}}张,建议尺寸:{{suggestedSize}}im
XujiRe·2023-12-06 14:51

el-upload上传文件（vue2，Element中的 el-upload文件上传）

简介：el-upload是一个基于ElementUI的上传组件，大家应该都知道，它可以方便地实现文件上传功能，今天来记录下如何（在vue2中）使用el-upload上传文件。
北城笑笑·2023-12-05 16:56

el-upload手动上传图片，上传后隐藏上传样式（el-upload上传单张图片，vue2）

简介：上期介绍了使用el-upload上传文件，这次来介绍一下如何使用el-upload上传图片，只能上传一次，上传图片后隐藏上传按钮部分。
北城笑笑·2023-12-05 16:56

前后端分离，文件上传下载（springBoot+vue+elementUI）

这里会用到elementUI的组件：el-upload一、文件上传：先看前端代码：（1）利用el-upload实现文件上传点击
qiuxinfa123·2023-12-05 14:45

exceljs读取el-upload上传的excle数据并转为json输出

当使用ElementUI的el-upload组件上传Excel文件时，您可以使用exceljs库将上传的Excel数据转换为JSON格式。
啃火龙果的兔子·2023-12-04 12:39

el-upload上传文件+超过一张图隐藏上传按钮+必填校验

实现效果：表单实现上传banner、logo及企业信息图功能，要求banner、logo为必填项，只允许上传一张图，超过一张隐藏上传按钮1.页面区只能上传jpg/png文件，且不超过2M建议尺寸：150px*50px2.表单验证//这里采用的是自定义验证方法：validateFile2rules:{logoImg:[{required:true,validator:validateFile2,tr
Amily8512·2023-12-04 08:45

element-plus 上传组件 el-upload 直传第一次取不到数据

取不到数据是官方("element-plus":"^2.3.4")beforeData在beforeUploadPromise之前导致异步设置:data不生效文件传不上去的原因，改为http-request去处理就可以了。挺奇怪，之前用("element-plus":"^2.2.17")是没有问题的。在before-upload里请求后端接口获取到accessid、policy、signature
qrn1024·2023-12-03 22:12

HTTP Content-Type (MIME) el-upload文件、图片上传 | 文件改名 | 大文件 | 文件下载

MIME为数据格式标签；最初MIME是用于电子邮件系统的，后来HTTP也采用了这一方案。在HTTP协议消息头中，使用Content-Type来表示请求和响应中的媒体类型信息。Content-Type：type/subtype;parametertype主类型，任意的字符串，如text，如果是*号代表所有；subtype子类型，任意的字符串，如html，如果是*号代表所有；parameter可选参数
海胆Sur·2023-12-01 22:41

el-upload 上传图片文件方法

好文链接覆盖action的默认请求行为是必要的http-request，自定义上传方法Content-Type设置成form-dataContent-Type:multipart/form-data;boundary=----WebKitFormBoundaryBicOUjQSEgA1dSB1以formData格式处理dataletfiles=newFormData()files.append('
海胆Sur·2023-12-01 22:11

el-upload上传文件实现视频上传

上传成功后，下面的滚动条和文件名消失将文件拖到此处，或点击上传//进度条return{progressFlag:false,loadProgress:0,}method中的方法//视频上传UploadVideo(params){this.form.videoPath=URL.createObjectURL(params.file);this.progressFlag=true;this.loadP
清幽子·2023-12-01 13:53

el-upload 照片墙 上传文件的小Dom

teleplment//添加、编辑只能上传jpg/png/jpeg文件，且不超过10MB,最佳比例为1：1,最大上传量5张//查看//点击图片出现弹框的组件（查看图片）图片data中的变量data(){return{queryType:"",//0新增,1编辑,2查看uploadDisabled:false,//文件超过5个上传按钮不显示dialogImageUrl:"",//查看图片所需要的路径
hangnan315·2023-11-30 07:53

使用饿了么组件el-upload实现手动导入文件

el-upload实现手动上传代码片段：//代码导入按钮导入//upload弹框将文件拖到此处，或点击上传只能上传xlsx文件下载模板//a标签是实现文件模板下载确定取消//data的定义expressVisible
恩婧·2023-11-29 19:51

el-upload 自定义上传成功 点击第二次上传没反应

导入Excelexportdefault{data(){return{fileListExcel:[],};},methods:{asyncimportSceneDicWord(file){letformdata=newFormData();//需要用formdata转成二进制流formdata.append("file",file.file);//"file"是后端参数letres=awaiti
Miya锤·2023-11-29 13:24

vue 实现上传文件大小的限制

1.在el-upload中使用before-upload限制用户上传的图片/文件格式和大小。具体代码如下：
小朋友的问号~·2023-11-26 18:25

vue+springboot个人主页上传文件或头像

在个人信息页面展示图片或修改图片前端主页利用element的el-upload组件图片样式在这统一设置，若尺寸太大可能上传为null而无法显示(人麻了).logo{margin:0auto;height
remosx·2023-11-26 16:44

vue 封装组件之上传图片组件(el-upload)

效果图：1.上传前2.上传后代码实现1.在components文件夹里自定义文件名称ImageUpload=this.limit}">请上传大小不超过{{fileSize}}MB格式为{{fileType.join("/")}}的文件importauthTokenfrom"../../util/auth";import{mapState}from"vuex";importaxiosfrom"axi
阿wei程序媛·2023-11-26 14:47

封装：el-upload上传图片组件（解决图片闪动、多选问题）

流程描述：使用el-upload组件，自定义上传方法（调后台接口），传图片file给后台，后台返回对应阿里云的oss链接，前端临时保存，最后点击页面提交按钮，再传后台oss数组链接。
qq_38969618·2023-11-25 22:28

el-upload 上传文件的使用方式（总结）

需求使用elementui中el-upload组件实现文件上传功能，主要分为两种：1.通过action,url为服务器的地址2.通过http-request（覆盖默认的上传行为，可以自定义上传的实现）,
yy_33404590·2023-11-24 21:41

uniapp 微信小程序 web-view利用el-upload在微信开发者工具上可以上传文件，真机模拟点击上传按钮无响应

原因：在微信开发者工具有效果是因为是在PC浏览器环境，而el-upload是适用于PCweb环境，如果使用真机模拟，不属于PC环境，所以el-upload上传按钮点击没反应。
公孙元二·2023-11-23 00:01

vue+Springboot实现头像预览及上传

思路说明element-plus提供了el-upload组件实现头像上传，具体的属性说明请参考官方文档组件拿到用户上传的图片之后，首先需要展示，用户确认后再传输给后端，后端接收图片资源后进行保存，并将保存状态返回给前端
Blank_Coder·2023-11-21 22:04

el-upload使用http-request自定义上传和进度条实战

介绍项目中发现使用默认的el-upload上传动作发送上传请求的时候不会带上请求头，于是想通过自定义请求也就是http-request来自定义上传。
罗汉爷·2023-11-21 20:26

elementUI el-upload随form表单上传图片

图片上传样式为picture-card样式模板代码：由于上传禁用了，图片就不能通过上传之后的效果显示，就是能在加载的过程中插入到文件列表里，用自带的on-change方法调用，同时我还做了文件类型判断同理，文件移除的操作也需要重写那么如何随form表单上传呢？只要调用这个插件参数绑定image即可，image[i].raw就是获取的文件数据了~~（有文件的form表单上传数据类型要用formDat
lareina_lcc·2023-11-21 15:07

el-upload上传之自定义上传/关闭页面中断请求

上传组件：组件效果功能说明：上传为post请求，请求需要携带四个参数，其中有file上传的文件自定义上传时显示进度条，正在上传的文件删除要杀死当前这个请求，这里是用的file.uid进行的对号查找当有任务上传时，关闭或者刷新页面要杀死所有请求。组件代码：{{getDirNameFn(childData.data.directoryName)}}上传文件点击上传importaxiosfrom'axi
周星星日记·2023-11-19 11:29

Vue + axios + el-upload组件，实现自定义多文件上传

需求：Vue项目中使用element-ui的el-upload上传文件，由于页面中除了文件上传，还有表单数据需要一起提交，所以不能使用el-upload的默认上传，而官方文档提供了http-request
曲昶光·2023-11-19 01:12

在 el-table 中嵌入 el-checkbox el-input el-upload 多组件，实现复杂业务场景

由于业务场景的复杂性，需实现：在el-table表格中嵌入el-checkbox多选框及el-input输入框及el-upload上传组件，先附上实现效果图。
Danli.·2023-11-19 00:40

【UI】饿了么 el-upload如何上传到不同的路径, 根据不同情况上传指不同的接口，不同的路径

在ElementUI的Upload组件中，可以通过在el-upload组件中定义before-upload回调函数，然后根据上传文件类型等条件在函数中改变action属性来实现上传到不同的路径。
fruge·2023-11-17 08:30

vue 实现文件上传、下载

vue实现文件上传效果图上传成功后会在下方显示，如下图所示1、使用elementui中的el-upload将文件拖到此处，或点击上传文件包括评审指南、须知及回避要求等，上传文件格式为word或pdf，文件大小在
淡紫色的回忆·2023-11-17 00:59

vue+elementUI,实现表单验证中的图片上传验证(el-form与el-upload)

在实现表单的过程中需要上传商品图片、二维码、头像等，需求是每次只能上传一张图片，并且需要进行相关的非空验证，操作演示如下图所示：点击图片上传，清空验证结果，并且修改验证对象kfFormRules，移除里面关于头像上传的条件headImg，这些逻辑需要在on-change中去实现，然后在点击确定就不会有关于headImg的验证，具体可以看上图标出的控制台提示。在点击删除图片时on-remove，需要
艺逸&福兜·2023-11-15 18:51

el-upload中返回流文件并进行下载

1、el-upload上传excel后返回流文件并进行下载处理elementUI中el-upload不支持配置responseType:“blob”，所以需要使用el-upload中的http-request
新时代_打工人·2023-11-15 14:26

element el-upload上传功能

2023.11.14今天我学习了如何使用el-upload:将文件拖到此处，或点击上传只能上传xlsx文件，且上传数据尽量不超过1000条如果后端接口是固定并且不需要携带参数就用action，如果是动态的就用
爱写代码的派大星·2023-11-14 15:16

el-upload上传文件前预览

点击已上传文件列表，预览上传前文件onPreview(file){LetURL=window.URL||window.webkitURLwindow.open(URL.createObjectURL(file.row)}
璐飞·2023-11-13 14:30

使用el-upload上传图片，改造预览功能

今天给大家介绍一下在使用Element的el-upload上传图片的过程中，改造原有的预览功能。
卡洛背心·2023-11-13 14:29

el-upload 上传、预览、和下载

恰好我没写过这方面的，让我纠结了好久啊1.上传（采用的是自定义上传方式）使用：http-request上传附件{{file.name}}预览删除因为下面的文件显示是自定义的我就把el-upload自带的隐藏了
悄悄变厉害阿·2023-11-13 14:29

el-upload 上传视频时，动态截取视频第一帧画面作为封面展示

最近项目有上传视频的需求，但Element的el-upload上传视频后，回显异常，不会显示视频内容(如下图)通过在网上查找截取视频第一帧的方法，自己稍加修改，得以正常显示封面，如下图：本方法采用前端动态获取第一帧画面
_修铁路的·2023-11-13 14:59

VUE + el-upload实现文件上传预览

VUE+el-upload实现文件上传预览下面展示弹窗代码：读取excel文件导入取消下载依赖：npminstallxlsxjs部分：exportdefault{data(){return{//导入importDialog:false,tableImportData:[],fileContent:'',file:'',data:'',importForm:{},fileList:[],newFil
LeoValiant·2023-11-13 14:59

VUE+Element-ui(el-upload) 上传图片/文件

泡泡日积月累第一篇！1、文件上传时携带参数文件上传时,想要在上传的时候携带参数，可直接使用：:data={参数},参数为键值对的形式{key1:value1,key2:value2}2、uploadopen:是否显示弹出层，该属性的值为布尔型，false表示不显示，true表示显示。title:弹出层标题，该属性的值为字符串类型。updateSupport:是否更新已经存在的用户数据，该属性的值为
菜泡泡@·2023-11-13 14:29

element ui el-upload上传附件，删除，预览，上传前验证,删除前验证

表单项：file-list=“fileList”上传附件显示文件名称limit=“1”限制上传数量为1点击上传data定义：//附件内容uploadData:[],//附件内容(初始化用)fileList:[],方法：//上传uploadUrl(){returnctx+"file/uploadFile";},//上传成功handleAvatarSuccess(res,file){constfile
杰瑞LJ·2023-11-13 14:58

el-upload 手动上传，本地预览(暂未上传成功)

1.change事件中，获取到filelist,获取本地地址,并保存到数组中2.preview事件中，判断被点击的文件，与地址数组中对比，获取其本地地址，window.open
m0_61679309·2023-11-13 14:28

el-upload上传组件的动态添加；el-upload动态上传文件；el-upload区分文件是哪个组件上传的。

需求：正常我们上传都是一个固定的文件传到固定的后端字段里去。但是有可能遇到，这种自定义新增多个上传组件，也就是遍历数组似的多个同样的上传组件此时就遇到一个问题：因为是遍历出来的上传组件，导致上传成功:on-success、改变:on-change、删除:on-remove都是用的同样的方法，那么怎么知道刚才上传的这个文件是属于哪个组件的呢解决方法：在模板html的时候，结合function的函数，
i_am_a_div_日积月累_·2023-11-13 14:57

el-upload 上传附件

false"禁止删除-->点击上传:limit限制上传的文件数量:on-remove删除文件时触发的钩子函数//移除附件handleRemove(file,fileList){console.log('移除附件...')console.log(file);letpla=this.careA.fileList.indexOf(file)console.log(this.careA.fileList.
ccjiushiwoo·2023-11-13 14:55
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他