el-upload 点击已上传文件跳转

最新推荐文章于 2024-09-18 21:14:44 发布

原创最新推荐文章于 2024-09-18 21:14:44 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何通过重写upload组件的逻辑实现文件上传后的预览功能，包括点击文件名打开链接及自定义删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

upload组件上传完毕后点击不能查看已上传的文件，现在需要点击能跳转，废话不多说直接上方法。
主要利用了插槽，并根据原有样式自己重写逻辑。
注意一点，删除一条的方法需要自己去重写逻辑

 <el-upload
    class="upload-demo"
    :action="action"
    :limit="limit"
    :on-exceed="handleExceed"
    :before-upload="beforeUploadEvent"
    :on-success="onSuccess"
    :on-error="onError"
    :file-list="list"
    :accept="accept"
    :headers="headers"
    :show-file-list="showFileList"
  >
    <el-button size="small" type="primary">点击上传文件</el-button>   
    <div slot="file" slot-scope="{ file }">
      <li class="el-upload-list__item is-success">
        <a @click="() => openUrl(file)" class="el-upload-list__item-name">
          <i class="el-icon-document"></i>{{ file.name }}
        </a>
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-circle-check"></i>
        </label>
        <i @click.stop="handleRemove(file)" class="el-icon-close"></i>
      </li>
    </div>
  </el-upload>