位置: 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环境变量)

  • 增值税和所得税地方留存比例
  • 一般纳税人的税收优惠政策
  • 独资企业的个人所得税怎么缴纳
  • 小汽车折旧年限的最新规定2023
  • 政府补助是否可以加计抵扣
  • 待摊费用属于企业的费用
  • 本期缴纳上期应纳税额是自动生成的吗?
  • 电子承兑逾期提示付款说明怎么写
  • 什么情况下做暂估
  • 支付增值税税控系统技术维护费用500元
  • 现金支出的一般程序
  • 债务重组的会计处理方法
  • 关联交易所得税规定
  • 事业专款支出形成的固定资产如何入账?
  • 教育协会发的证有用吗
  • 新会计准则有预提费用吗
  • 摊销房租账务处理
  • 应交税金成负数
  • 定率征收多缴的企业所得税怎么计算?
  • 个人投资理财需要注意什么
  • 估价入账是什么意思
  • 取得不动产时的作价
  • 消费税的征收范围
  • 花店怎么做会计工作
  • 工商营业年报怎么做
  • 银行汇票与银行本票的区别
  • 固定资产折旧方法的选择
  • php的file函数
  • 税收筹划的税种
  • 不列颠哥伦比亚大学排名
  • 利润表利息费用包括哪些科目
  • trace命令详解
  • php使用for循环实现乘法口诀表
  • 资产负债表日后调整事项
  • wordpress neve
  • 发票申请条件
  • 优先股可转让吗
  • 运输发票开具条件
  • 增值税专用发票电子版
  • 应付账款会计分录大全
  • mongodb导入数据三种方式
  • mongodb与mysql相比的优缺点
  • 法人如何提取公积金
  • 家禽养殖企业
  • 以权益结算的股份
  • 未开票收入是怎么算的
  • 母公司与子公司的区别
  • 补办理营业执照需要什么材料
  • 维修材料分类
  • 无形资产达到可使用状态前如何入账
  • 为什么要办理外地身份证
  • 挂靠建筑公司企业所得税怎么交?
  • 确认应付职工薪酬如何计算
  • 仓管需要会计证吗
  • mysql基于什么模型
  • sql自定义数据类型
  • Win10怎么显示我的电脑
  • cf分屏不全屏
  • 萝卜家园系统安装教程
  • 怎样备份微信聊天记录到新手机
  • win8 开始
  • macbook怎么开启
  • propelac.exe - propelac是什么进程 有什么用
  • win8系统怎么进入控制面板
  • cocos2dx4.0教程
  • nodejs实战教程
  • 基于python的设计
  • perl执行linux命令
  • html超链接打开本地文件
  • jQuery checkbox选中问题之prop与attr注意点分析
  • node的使用场景
  • js的异步解决方案有哪些
  • jq设置下拉框的值
  • android模拟器无法运行
  • 设置家的地址
  • JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
  • 干部试用期满转正考察谈话提纲
  • 事业单位录用备案表审核快吗
  • 建筑企业应如何选择适用的质量体系标准
  • 合肥地税局上班时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设