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

这篇具有很好参考价值的文章主要介绍了el-upload组件的文件回显功能和添加文件到elupload组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

过程:

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

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


 

思考:    

        到这里我感觉向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.toymoban.com/news/detail-419575.html

到了这里,关于el-upload组件的文件回显功能和添加文件到elupload组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用el-upload组件实现递归多文件上传

    一、需求描述:在页面上点击按钮弹出选择电脑文件的界面,可以一次性选择多个文件一起上传到服务器上,并把上传成功的文件展示在页面上。 · 二、 问题阐述:el-upload是支持多文件上传的,但是是同步进行的,你点击上传按钮,选择了多个文件后点击确定,会同时调用

    2023年04月08日
    浏览(40)
  • vue+elementui中el-upload组件上传文件时,修改文件名,不用FormData

    今天在开发的时候,后端突然提了一个需求,因为特殊的文件上传不进文件服务器,所以后端问我能不能上传的时候给加个扩展名,本着只要逻辑没问题,都可以通过代码实现的理念,我说:“可以“”,于是乎有了这篇文章。 首先是去element官网逛了逛,发现也没有提供修

    2024年02月06日
    浏览(48)
  • el-upload使用http-request实现图片上传,回显,放大效果

            在项目开发中,为了实现上传文件的功能,我们需要用到el-upload这个组件,为了实现回显放大效果,就要用到el-image这个组件了。官方文档中介绍了上传的两种方法,一个是使用action,其参数必须要上传的地址;另一个是http-request,该方法覆盖默认的上传行为,可

    2024年02月08日
    浏览(64)
  • 【前端学习记录】vue中使用el-upload组件时,上传文件进度条没有实时更新

    问题背景 今天在项目中遇到一个问题,使用el-upload组件时,上传文件进度条没有实时更新,需要手动点击一下才会更新。 原理及可尝试方案 el-upload 组件默认的进度条是通过 Ajax 请求上传文件,并且进度条通过监听 xhr.upload 的 progress 事件来实时更新。但是,有些浏览器在处

    2024年02月01日
    浏览(52)
  • el-upload 回显处理(1:后端返回图片地址/2:后端返回base64格式)

    编辑页面,查看(详情)页面时候就需要form表单里面得上传组件回显新增时候上传得图片 (只针对于只上传图片得项目) 1.当后端返回来地址得时候 当进入查看页或者编辑页,不管你是 查看/编辑接口 里就给你返回了图片地址, 还是 你进入页面后,拿着图片id去请求图片路径的接口

    2024年01月19日
    浏览(68)
  • el-upload组件问题 已解决

    前两天我写了一个上传下载功能 使用el-upload组件 当后端将文件流格式数据发送到响应里面前端屈接受的时候 ,我们使用 el-upload 组件里面的 :on-success 方法进行捕捉,使用blob进行文件下载 文件可以正常下载下来 但是打开文件损坏   我去网上寻找答案, 但大多都是说 请求头

    2024年02月03日
    浏览(51)
  • el-upload封装组件ExcelUpload,支持额外参数

        基于pig-ui进行技术学习,前端采用vue2。在进行Excel上传下载的过程中遇到了需要上传文件同时传递参数的问题,经过修改测试,实现了参数传递。     修改后的excel.vue如下,该文件封装了el-upload对象,原始代码不支持before-upload。     注意上述文件增加的注释。      实

    2024年02月07日
    浏览(51)
  • vue Element ui上传组件el-upload封装

    注释: 1. limit 可上传图片数量 2. lableName 当前组件name,用于一个页面多次使用上传组件,对数据进行区分 3. upload 上传图片发生变化触发,返回已上传图片的信息 4. imgUrl 默认图片

    2024年02月11日
    浏览(63)
  • elementUI 的上传组件<el-upload>,自定义上传按钮样式

    原理:调用el-upload组件的方法唤起选择文件事件 效果: 页面代码: js代码:(其他逻辑与element文档的上使用一致) css代码: 隐藏原来的选择图片按钮 原理:把图片显示分离出来,el-upload做选择图片使用,单独做一个显示图片的区域 效果:  页面代码: js 代码: css代码:

    2024年02月13日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包