使用elementUI的upload组件上传文件时目录自动消失了?radio组件设置label的小坑

BitNebulaSeeker
• 阅读 7292

我是初学者,不对的地方请大家多多指教。
在使用vue和elementUI开发前端界面的过程中使用了upload组件,致点击上传按钮以后文件目录在界面上自动消失了,因为打算文件和表单其他参数一起上传,纳闷了很久,还以为需要把文件数据流缓存到浏览器中云云瞎猜,最后在看elementUI的文档过程中发现设置upload组件参数的:auto-upload=false,可以防止自动上传,还没上传文件就不会在界面上消失了,这个参数默认是为true,auto-upload=true会触发:before-upload="beforeUpload"

使用elementUI的upload组件上传文件时目录自动消失了?radio组件设置label的小坑

使用elementUI的upload组件上传文件时目录自动消失了?radio组件设置label的小坑

那么如果表单上有其他字段需要和上传文件一起提交怎么办呢?这是我们可以在表单的提交按钮触发的函数

使用elementUI的upload组件上传文件时目录自动消失了?radio组件设置label的小坑

this.$refs.upload.submit();也会触发beforeUpload,在这个函数里把表单里的数据复制给后台提供的字段就可以了
注意this.$refs.upload.submit();一定要放在params之前,先把上次文件数据流赋值在表单里的字段,在把整个表单转化为json对象params。
而且我发现element组件里有些属性在组件里应用时前面都不用加冒号的??有些却要这个是为什么?
首先要明白':'其实是vue里面的v-bind缩写

在element上应用Radio单选框组件对比了一下时发现

使用elementUI的upload组件上传文件时目录自动消失了?radio组件设置label的小坑

使用elementUI的upload组件上传文件时目录自动消失了?radio组件设置label的小坑
在项目中应用时

使用elementUI的upload组件上传文件时目录自动消失了?radio组件设置label的小坑
报错

使用elementUI的upload组件上传文件时目录自动消失了?radio组件设置label的小坑

但是当我:label=“3”改为数字时不会报错,但是我就是想传字符串,查看了一下文档
发现当label的值是字符串的时候,不用加:也就是v-bind。如果加了:(v-bind)他会把label里的值识别为变量,而我并未有事先声明这三个变量,所以报错了,因为数字不能充当变量所以不会报错,我的个人理解是这个样子的,去掉引号就不会报错了
使用elementUI的upload组件上传文件时目录自动消失了?radio组件设置label的小坑
在学习的过程中发现我对框架的底层不太理解,如果原理明白,解决问题和学习框架的效率就回提高很多。

点赞
收藏
评论区
推荐文章
Immortal Immortal
4年前
vue项目中使用element-ui实现excel表格上传
恰逢项目中要实现excel表格上传,度娘甚久,得此一文,留之。原文:https://blog.csdn.net/qq36718999/article/details/95387542需求vuecli搭建前端项目,并使用elementui实现本地excel表格上传。(1)限制上传文件只能是xls、xlsx格式;(2)限制上传文件大小不能超过2MB
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Easter79 Easter79
3年前
vue+element UI + axios封装文件上传及进度条组件
1.前言之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人。项目用的是Vue框架,UI库使用的是elementUI,前后端交互请求使用的是Vue官方推荐的axios。其中,UI方面主要使用了elementUI库中的Upload文件上传组件、Progress
芝士年糕 芝士年糕
2年前
Nginx 调整文件上传大小限制
使用3A服务器做了网页,感觉挺不错的,使用LNMP环境用Nginx部署了前端,发现上传附件大一点就会报错,查看配置文件,发现spring的附件配置已经配置了。那么就看下Nginx的body设置。nginx文件上传默认是1MB。在server
前端尾随者 前端尾随者
3年前
Vue项目添加ElementUI
1\.在上一篇,搭建环境,创建vue项目目录结构如下:编写工具,本人推荐:VisualStudioCode2\.进入到项目文件夹,执行加载elementui组件命令:npmielementuiS 3\.在main.js代码里添加对elementui的引用:importElementUIfrom'elementui'import'el
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
FastDFS提供的API简介
 FastDFS提供的API及简要说明如下:  upload:上传普通文件,包括主文件  upload\_appender:上传appender类型文件,后续可以对其进行append、modify和truncate操作  upload\_slave:上传从文件  download:下载文件  delete:删除文件
Wesley13 Wesley13
3年前
PHP代码审计笔记
0x01最简单的文件上传未进行文件类型和格式做合法性校验,任意文件上传漏洞代码示例:新建一个提供上传文件的 upload.html<html创建上传脚本  upload\_file.php<?php漏洞利用:可上传任意文件!(https://oscimg.oschina.net/oscnet/a
Wesley13 Wesley13
3年前
Java多线程导致的的一个事物性问题
业务场景我们现在有一个类似于文件上传的功能,各个子站点接受业务,业务上传文件,各个子站点的文件需要提交到总站点保存,文件是按批次提交到总站点的,也就是说,一个批次下面约有几百个文件。      考虑到白天提交这么多文件会影响到子站点其他系统带宽,我们将分站点的文件提交到总站点这个操作过程独立出来,放到晚上来做,具体时间是晚上7:00到早上7:00。
前端文件上传的几种交互造轮子 | 京东云技术团队
前端文件上传本来是一个常规交互操作,没什么特殊性可言,但是最近在做文件上传,需要实现截图粘贴上传,去找了下有没有什么好用的组件,网上提供的方法有,但是没找完整的组件来支持cv上传,经过了解发现可以用剪贴板功能让自己的cv实现文件上传,于是自己就整合了目前几种文件上传的交互方式,码了一个支持cv的vue3文件上传组件(造个轮子)。