elementui el-upload需要在上传文件前,可以进行弹窗控制是否上传 upload

这篇博客详细介绍了如何利用Element-UI组件库中的<el-upload>组件,结合Vue.js,实现一个具有预览、移除、限制上传数量及确认提示功能的文件上传模块。代码示例中包括了点击上传的处理逻辑、文件移除、文件预览、超出限制的警告以及删除前的确认操作。

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

部分代码是官网的东西element-UI

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary" @click.stop="handleUpload">点击上传</el-button> 
  <!-- stop阻止冒泡事件 -->
</el-upload>
<script>
  export default {
    data() {
      return { };
    },
    methods: {
		handleUpload(){
			this.$confirm('xxx,确认上传文件?', '提示', {
		       confirmButtonText: '确定',
		        cancelButtonText: '取消',
		        type: 'warning'
		      }).then(() => {
		        this.$refs['upload'].$refs['upload-inner'].handleClick() //重点是这句,
		      })
		},
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }?`);
      }
    }
  }
</script>
Element UI 提供了一个非常强大的组件库,其中 `el-upload` 组件用于文件上传功能。为了实现文件格式的校验,我们可以结合它的 `before-upload` 钩子函数来进行自定义验证。 --- ### 示例代码 ```vue <template> <div> <!-- el-upload 组件 --> <el-upload action="https://jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" multiple > <el-button type="primary">点击上传</el-button> </el-upload> </div> </template> <script> export default { methods: { handleBeforeUpload(file) { // 定义允许的文件类型 const allowedTypes = ["image/jpeg", "image/png"]; // 判断文件 MIME 类型是否符合要求 if (!allowedTypes.includes(file.type)) { this.$message.error("仅支持 JPEG 或 PNG 格式的图片!"); return false; // 返回false阻止继续上传流程 } // 还可以根据需要增加文件大小限制等其他校验逻辑 return true; // 允许上传 }, }, }; </script> ``` --- ### 功能解析 1. **`action`:** 表示文件提交的目标 URL 地址。 2. **`before-upload`:** 在上传会触发该钩子函数,返回值如果是 `true`,则正常上传;如果返回 `false`、Promise.reject() 或者抛出错误,则会中断上传过程。 3. **核心逻辑:** - 我们通过 `file.type` 获取到当文件的实际 MIME 类型; - 将其与预设的支持类型数组对比,如果不匹配就提示用户并终止上传。 4. **弹窗提醒:** Element Plus 内置了消息通知工具 `$message.error()` 来展示友好信息给用户知道哪里出了错。 --- ### 注意事项 - 虽然可以在端完成初步检测,但永远不要忽略后端的安全性检查。端很容易被绕过,因此服务端也应当再次核实所有接收到的数据无误后再保存至数据库或磁盘。 - 对于某些特殊需求如压缩包解压后的结构分析这类复杂任务更适合交给后台执行而非单纯依赖客户端脚本解决。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值