el-upload调用内部方法删除文件

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

从Element UI 的官方文档中, Upload 上传组组件提供了on-remove和before-remove的文件删除的钩子属性(回调方法名),但如何调用组件删除方法(让该方法删除本地上传文件列表以及触发这两个钩子)并无相关说明。

在不定义file插槽(slot)的情况下,通过UI点击控件文件列表上文件的叉标签(X),控件的封装内部会为我们触发相应的before-remove钩子、删除组件列表中对应文件信息、on-remove钩子(一般此处调用后台去删除服务端对应文件)等调用,但在我们需要自定义文件列表的模板的情况下,我们需要集成文件删除的操作(包括保持让before-remove钩子、on-remove钩子也像从默认UI的叉标签X删除的情况那样同样生效),而官方文档并没有说明删除操作的API:

官方文档中的例子如下,下载(实现相对简单)、删除操作并无具体举例说明:

el-upload调用内部方法删除文件,Javascript,el-upload,uploader,upload,Element

el-upload调用内部方法删除文件,Javascript,el-upload,uploader,upload,Element

 el-upload调用内部方法删除文件,Javascript,el-upload,uploader,upload,Element

el-upload调用内部方法删除文件,Javascript,el-upload,uploader,upload,Element

  没办法,只好分析该组件的源代码:

https://unpkg.com/browse/element-ui@2.15.13/packages/upload/src/index.vue

https://unpkg.com/browse/element-ui@2.15.13/packages/upload/src/upload.vue

https://unpkg.com/browse/element-ui@2.15.13/packages/upload/src/index.vue

el-upload调用内部方法删除文件,Javascript,el-upload,uploader,upload,Element

el-upload调用内部方法删除文件,Javascript,el-upload,uploader,upload,Element

 根据源码可知,删除操作是通过组件内部的upload子组件(ref为“upload-inner”)调用onRemove回调方法实现的,而该子组件的onRemove回调方法实际引用的是上层组件(el-upload本身)的handleRemove方法;

因此,我们使用el-upload组件可以有以下方法来调用删除文件的操作以触发相应的before-remove钩子、从组件的列表删除对应文件、on-remove钩子:

(假设该el-upload组件ref="upload_attach")

  1. $refs.upload_attach.$refs['upload-inner'].onRemove(file);
  2. $refs.upload_attach.handleRemove(file)

 el-upload调用内部方法删除文件,Javascript,el-upload,uploader,upload,Element

<el-upload ref="upload_attach" :file-list="editForm.AttachFileInfos" drag list-type="picture-card" multiple :limit="maxUpload" :on-exceed="handleExceed"
           :action="uploadUrl" :auto-upload="autoupload" @*:headers="headers"*@ :data="uploadParam" :on-change="handleChange1"
           :on-success="uploadSuccess1" @*:on-preview="previewPic"*@ :on-remove="removeAttachFile1" :before-remove="beforeRemove" :class="{hideUnload:notAttachUploader}">
    @*<em class="el-icon-plus"></em>*@
    <em class="el-icon-upload"></em>
    <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>

    <div slot="file" slot-scope="{file}">
        @*<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">*@
        <span>{{file.name}}</span>
        <span class="el-upload-list__item-actions">
            @*<span class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
            </span>*@
            <span class="el-upload-list__item-delete"
                  @@click="handleDownload(file)">
                <i class="el-icon-download"></i>
            </span>
            <span class="el-upload-list__item-delete"
                  @@click="$refs.upload_attach.$refs['upload-inner'].onRemove(file);"
          @*或者:@@click="$refs.upload_attach.handleRemove(file);"*@
            >
                <i class="el-icon-delete"></i>
            </span>
        </span>
    </div>
</el-upload>


handleDownload: function (file) {
    var link = document.createElement("a");
    link.setAttribute("href", file.url);
    link.setAttribute("download", file.name);
    link.setAttribute("target", "_blank");
    link.setAttribute("display", "none;");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
},

运行效果:

el-upload调用内部方法删除文件,Javascript,el-upload,uploader,upload,Element文章来源地址https://www.toymoban.com/news/detail-684518.html

到了这里,关于el-upload调用内部方法删除文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Vue3使用ElementPlus中的el-upload手动上传并调用上传接口

    实体类 定义接口 上传文件并插入数据库数据

    2024年01月20日
    浏览(61)
  • el-upload实现上传文件夹

    背景:如图一所示,最下面有一个黄色上传文件按钮,为手动上传而且上传区域有上传文件和上传文件夹的区分 所以需要在点击了上传文件夹做特殊处理使得el-upload可以上传文件夹 01.在拖拽上传的区域绑定一个点击事件 handlePreview ,(注意不要直接绑定在el-upload区域,会被触

    2024年02月07日
    浏览(59)
  • el-upload 文件上传组件的使用

    element-ui官网 element ui=upload上传组件 Upload 上传文件这个功能是我们在企业实际开发当中使用频率是非常高的这样一个文件上传的功能,,element ui组件组也给我们提供了上传的组件。所有我们一定要熟悉掌握它 使用之前先进行一下element ui的安装和配置 打开终端=输入npm i elem

    2024年02月11日
    浏览(75)
  • el-upload上传文件携带额外参数

    在进行文件上传时,需要传递其他参数,比如下图中需要实现携带下拉框的参数 前端实现:将下拉框中的参数 传递到:data中  :data=\\\"{\\\'script_model\\\':script_model}\\\"    后端实现: 从post请求中获取携带的参数:  script_model = request.POST.get(\\\'script_model\\\')

    2024年02月11日
    浏览(60)
  • el-upload自定义上传文件显示进度条

    el-upload自定义上传文件时需要显示进度条,但使用 http-request 会覆盖默认的上传行为, on-progress 也就不生效了,所以可以 自定义上传的实现 。 按钮 数据 事件 导入接口 接口方法 uploadEvent ——在封装的axios请求方法的headers里面加入即可(关键)

    2024年02月15日
    浏览(45)
  • el-upload实现上传文件并展示进度条

    el-upload在实现文件上传时无法触发on-progress钩子,即使调用后端接口并成功的情况下都无法触发,可以通过如下配置来解决: 随后将config添加至调用后端接口,即可成功获取进度~ html: JS部分

    2024年02月04日
    浏览(38)
  • 使用el-upload组件实现递归多文件上传

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

    2023年04月08日
    浏览(40)
  • element-ui文件上传el-upload

            element-ui官网中有文件上传         首先先展示一下我页面的实现效果,如下图所示:          从图中可以看出,我这边实现的是一个可显示进度条的文件上传操作,而且如果上传的文件很大等,还可以中断文件上传。         值得注意的是,如果有添

    2024年02月05日
    浏览(54)
  • Element之el-upload多文件一次性上传

    方法一: 页面展示: Html部分代码: accept 用于限制允许上传哪些类型文件 name 上传的文件字段名  (默认为 file) multiple 是否支持多选文件 action 必选参数,上传的地址 headers 设置上传的请求头部 file-list 上传列表 auto-upload 是否在选取文件后立即进行上传 主要逻辑: 1. 多选文

    2024年02月11日
    浏览(43)
  • element ui ---- el-upload实现手动上传多个文件

    ui部分 js 实现上传

    2024年02月15日
    浏览(55)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包