element ui 中 upload 控件 $confirm 方法

最新推荐文章于 2024-08-10 07:19:26 发布

siwangdexie_new

最新推荐文章于 2024-08-10 07:19:26 发布

阅读量1.3k

点赞数 1

分类专栏： element-ui

本文链接：https://blog.csdn.net/siwangdexie_copy/article/details/109331665

版权

在Element UI的Upload组件中，针对pdf、txt、mp3、mp4格式做上传校验。当格式不正确时，通过before-upload阻止上传，并在before-remove事件中增加格式检查。原有代码在格式错误时会触发不必要的删除询问。解决方案是改造before-remove事件，使用外部Promise包裹$confirm以正确处理删除操作。

摘要由CSDN通过智能技术生成

element ui文档地址

需求：

页面需要添加一个上传控件，可以上传pdf、txt、mp3、mp4四种格式，如果格式不对，则上传不成功。

代码背景：

pc端、"@vue/cli-service": “~4.5.0”,、“element-ui”: “^2.13.2”,

描述

upload控件中，要做格式校验，所以使用了 before-upload 方法，对于不符合标准的格式，拒绝上传。
ps：为了说明问题，只截取了需要的代码，如果使用这个功能，请从官方文档引用完整代码

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-remove="handleRemove"
  :before-upload="beforeUpload"
  :file-list="fileList"
  :before-remove="beforeRemove"
  >
  <!-- multiple -->
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">注：只能上传mp3、mp4、pdf、txt格式文档</div>
</el-upload>
// 文件上传之前
beforeUpload(file){
   
  console.log(file,"file文件上传之前")
  // 判断文件格式
  const fileType = file.type;
  const fileTypeCheck =