前端基础学习-el-upload上传一次后禁止删除上传的el-upload-list__item

最新推荐文章于 2024-08-23 15:21:55 发布

小夭。

最新推荐文章于 2024-08-23 15:21:55 发布

阅读量6.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue html javascript

本文链接：https://blog.youkuaiyun.com/m0_47146037/article/details/118804593

前端专栏收录该内容

56 篇文章

订阅专栏

该博客介绍了一个在前端开发中使用el-upload组件实现批量上传文件后禁止删除和再次上传的解决方案。通过设置`disabled`属性并监听`on-change`事件来控制上传状态，当有文件上传后，禁用上传按钮和删除功能。提供了相关代码示例展示如何实现这一功能。

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

前言

在最近的开发中遇到了一个需求是，批量上传文件后，禁止对上传的文件进行删除与再次上传的功能。（这里有另外的按钮全部清空上传的文件）

解决方法

这里其实只要在el-upload组件中添加一个disabled就行，但是我这里根据是否上传过文件去禁用删除按钮了
在这里插入图片描述

代码

html

			<el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
              :limit="3"
              :show-file-list="true"
              :class="{ disabled: uploadDisabled }"
              :on-change="handleUploadChange"
              :auto-upload="false"
              :disabled="abandonFileList.length === 0 ? false : true"
              :file-list="abandonFileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">上传后禁止上传与删除</div>
            </el-upload>

	handleUploadChange (file, fileList) {
      this.abandonFileList = fileList
    }

效果

在这里插入图片描述
具体的el-upload-list__item不再支持删除，且按钮无法点击再次上传