Vue 使用 ElementUi el-upload 手动上传文件限制同名文件

<el-upload
  class="upload-demo"
  action="#"
  multiple
   :auto-upload="false"
  list-type="picture-card"
  :file-list="modelForm.fileList"
  :show-file-list="false"
  :limit="3"
  :on-change="handleChange"
  >
  <el-button size="small" type="primary">点击上传文件</el-button>
</el-upload>

// 文件状态改变时
handleChange(file) {
	let { name , uid } = file
	// 利用findIndex方法查询名字是否重复,不重复返回-1
	const findCommonNameIndex = this.modelForm.fileList.findIndex(
	        item => item.name == name
	      )
    // 如果重复则findCommonNameIndex为-1,进去判断进行相应操作
    if (findCommonNameIndex !== -1) {
      this.$message.warning('不能上传同名的文件')
      const selectFileList = this.modelForm.fileList.filter(item => {
        return item.uid != uid
      })
      this.modelForm.fileList = selectFileList
      return
    }
}
### ElementUI `el-upload` 组件使用教程 #### 一、基本配置与属性设置 ElementUI 的 `el-upload` 组件用于文件上传操作,支持多种自定义选项来满足不同业务需求。为了实现基础的文件上传功能,开发者可以通过如下方式引入并初始化该组件: ```html <template> <div class="upload-demo"> <!-- 单个文件上传 --> <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeAvatarUpload" list-type="picture"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> <!--文件批量上传 --> <el-upload drag multiple action="https://jsonplaceholder.typicode.com/posts/" style="margin-top: 20px;"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处,或点击<em>上传</em></div> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </div> </template> ``` 上述代码展示了两种常见的文件上传模式——单文件上传和多文件批量上传,并设置了相应的提示信息。 #### 二、常见问题解决方案 ##### 页面闪动问题处理 当利用 `file-list` 属性展示已选中的文件列表时,可能会遇到页面闪烁的现象。对此可通过调整 CSS 样式的方式加以优化,在特定状态下隐藏某些元素从而减少视觉干扰[^2]。 ```css <style lang="scss" scoped> ::v-deep .el-upload-list__item.is-ready, ::v-deep .el-upload-list__item.is-uploading { display: none !important; } </style> ``` 此段样式规则针对处于准备状态(`is-ready`) 或正在上传 (`is-uploading`) 的文件项进行了不可见化处理,有效缓解了由于频繁更新 DOM 所引起的界面抖动现象。 ##### 防止表单提交引发的页面重载 对于嵌套于 `<el-form>` 表单项内的 `el-upload` 控件来说,默认情况下会触发整个表单的数据提交行为,进而造成不必要的页面跳转或是 URL 参数附加等问题。为了避免这种情况的发生,可以在父级容器上绑定事件监听器以拦截默认动作[^3]: ```vue <!-- Vue Template --> <form @submit.native.prevent> ... <el-upload ... /> ... </form> ``` 通过添加 `@submit.native.prevent` 指令能够确保即使用户误触提交按钮也不会影响当前浏览体验;当然也可以考虑重构布局结构使 `el-upload` 不再位于任何形式控件内部以此彻底规避潜在风险。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值