位置: IT常识 - 正文

el-upload组件的文件回显功能和添加文件到elupload组件(elementui的upload组件详解)

编辑:rootadmin
el-upload组件的文件回显功能和添加文件到elupload组件

推荐整理分享el-upload组件的文件回显功能和添加文件到elupload组件(elementui的upload组件详解),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:el-upload的filelist,el-upload的filelist,el-upload data,element的upload组件,后端怎么处理,el-upload的filelist,el-upload的accept,el-upload的filelist,el-upload的filelist,内容如对您有帮助,希望把文章链接给更多的朋友!

        省流: 先获取这个文件对象,使用handleStart方法添加到组件。

this.$refs.uploadRefName.handleStart(rawfile);

        在开发的时候遇到表单里需要上传图片的功能。看了下el-upload组件的使用方法,在修改表单的时候,el-upload组件的回显遇到了麻烦:

过程:

        根据一开始的理解,按照其他教程的方法,向file-list里添加一个文件对象[{name: "aa", url: http:xxxxxxxx}]就可以。

我尝试加入一个图片的url(后来发现那并不是一个直接的url路径,而是一个get的请求路径,这可能是我添加filelist不成功的原因,暂没验证),发现组件里的文件列表一直显示不成功,后来尝试new了一个File对象,成功在文件列表里显示成功,但是在before-upload钩子函数中却找不到这个文件,传过来的参数file一直是undefined,而file-list里有这个文件对象,但是属性和其他文件对象千差万别。

el-upload组件的文件回显功能和添加文件到elupload组件(elementui的upload组件详解)

思考:    

        到这里我感觉向file-list加入自己new出来的文件对象并不是向upload组件上传文件,而是向uploadList这个组件(el-upload的子组件),然后显示到对应div和file-list

        这种行为和点击区域从本地选择文件进行上传不一样,并不是把文件对象加入组件。

        在编辑表单回显的时候,假如对upload这个组件没有做任何更改,点击提交是不会通过beforeupload钩子函数的验证的,这说明组件里并没有文件对象,往file-list添加文件对象没有真正的添加进去。

我的需求:   

        我需要在编辑表单回显的时候,把文件对象加入到组件中,用于通过beforeUpload钩子函数的验证和上传文件对象到后台。

解决办法:

        然后我开始查找如何向el-upload组件添加组件,官方文档里并没有提供手动加入file对象的方法,百度了下发现也没有关于加入文件到el-upload组件的内容。

        遂去看了下源码。elementUi对这个组件的实现就300来行,看了后发现有个handleStart方法用于获取增加文件对象,根据上文提到的url路径问题,我用xmlhttprequest方法get到这个文件对象,然后用handleStart方法成功添加到组件,通过了钩子函数验证,成功传到后台。代码如下

//给upload组件添加文件addFile(url, iamgeName) { var blob =null; var xhr = new XMLHttpRequest(); xhr.open("get", url); xhr.setRequestHeader('Accept', 'image/png'); xhr.responseType = "blob"; xhr.onload = () => { blob = xhr.response; let imageFile = new File([blob], imageName, {type: 'image/png'}); console.log(imageFile); //el-upload组件的添加文件方法 this.$refs.upload.handleStart(imageFile); }; xhr.onerror = (e) => { }; xhr.send();}

说了这么多废话,有用的就一句,用handleStart方法添加文件对象到组件,也可能是我的url问题导致filelist没有把文件对象真正加入进去,还没验证,懒得验证了。。。

本文链接地址:https://www.jiuchutong.com/zhishi/295297.html 转载请保留说明!

上一篇:向日葵上的靛蓝彩旗鸟 (© William Krumpelman/Getty Images)(蓝色向日葵)

下一篇:vite .env环境变量配置(vericut9.0环境变量)

  • 企业境外参展 人员成本
  • 新成立的销售公司有哪些
  • 收取子公司管理费,开具什么发票
  • 负数发票可以作废不
  • 工会经费返还怎么使用
  • 固定资产核算的心得体会
  • 增值税普通发票需要交税吗
  • 债权如何变现
  • 社保费工商退费金额如何做会计分录呢?
  • 发票现金支付的做账增值税
  • 转让土地及地上建筑物
  • 哪些罚款不能进行所得税税前扣除?
  • 企业购买银行理财会亏吗
  • 一般纳税人选择简易计税进项税可以抵扣吗
  • 新办企业国税报税时间
  • 销售商品会计凭证
  • 所得税费用是在哪个科目
  • 人机料法环是什么方法
  • 公司与股东的往来款涉税
  • 开票资料地址填营业执照
  • 专用发票抵扣联丢失怎么办最新规定
  • 哪些外籍个人应在中国缴纳个税?
  • 付款时收到应收票据会计分录怎么做?
  • 公司院内打井怎么处罚
  • 货币性项目和非货币性项目的区别是什么?如何进行处理?
  • 应收账款和预收账款的关系
  • 事业单位负债类科目包括哪些科目
  • 科技服务业是怎么分类的
  • win10设置变成竖排
  • sdi是什么文件
  • 多交的所得税退回来账务处理
  • 那些收入不用缴税
  • PHP:pg_parameter_status()的用法_PostgreSQL函数
  • thinkphp操作数据库
  • php中ajax
  • php pdo sqlserver
  • css怎么调用
  • 成本价低于现价 应该卖吗
  • 用chatgpt写insar地质灾害的论文,重复率只有1.8%,chatgpt4.0写论文不是梦
  • php的输出语句主要有哪些
  • 逾期未退押金是否确认收入
  • 管理费用包括项目成本吗
  • 关联方占用资金应对措施
  • 借条这样写才有效
  • 企业所得税季度预缴怎么计算
  • 未确认融资费用怎么算
  • 汽修厂的发票开的是什么票
  • 企业应纳税所得额的计算原则
  • 应收账款应付账款借贷方都表示什么
  • 支付稿费需要发票吗
  • 已经计提工资后怎么做账
  • 装修公司购买材料,工程施工账务处理会计分录
  • 拆借 拆放
  • 叉车上牌流程注册登记
  • 取得存款利息收入需附
  • 息税前利润是什么税之前
  • 小企业应该如何发展
  • 怎么提高xp系统运行速度
  • 如何创建虚拟硬盘
  • WIN10系统CPU占用率高
  • xp更改远程端口
  • linux ftp搭建教程
  • win10预览版21337
  • python挑战
  • 置顶如何设置固定顺序
  • js canvas压缩图片
  • 从《AndEngine游戏开发实践指南》开始,学习AndEngine引擎
  • vue动态引入模块
  • js中函数定义有哪几种方式
  • css标准规范
  • websocket协议解析
  • php和python有什么区别
  • jquery给td设置内容
  • asp.net mvc view
  • Jar mismatch! Fix your dependencies
  • javascript要怎么学
  • 迅雷继续下载
  • 煤炭开什么发票
  • steam 申请
  • 为什么有的企业在企查查上查不到
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设