vue 上传组件 选择文件之前有校验 ,校验通过弹出文件选择框,否则不弹

<el-upload
        ref="upload"
        :on-remove="handleRemove"
        :http-request="handlePreview"
        :before-remove="beforeRemove"
        :limit="1"
        :file-list="fileListUpload"
        :auto-upload="false"
        :on-success="uploadSuccess"
        :on-error="uplodError"
        class="upload-insurant"
        action=""
      >
        <el-button
          v-show="show"
          ref="importbtn"
          slot="trigger"
          size="small"
          type="primary"
        >选取文件</el-button>

        <el-button
          style="margin-left: 10px;"
          size="small"
          type="primary"
          @click="beforeAvatarUpload()"
          :disabled="isDisabled"
        >选取文件</el-button>

        <el-button
          :disabled="isDisabled"
          style="margin-left: 10px;"
          size="small"
          type="primary"
          @click="submitUpload"
        >
          上传
        </el-button>
      </el-upload>

el-upload 中第一个按钮默认为上传按钮(就是点击后可以弹出文件框)
首先:
1、 首先定义一个隐藏的按钮,该按钮为上传按钮,(第一个)
2、 在定义一个普通按钮 第二个按钮 和第一个可以一样,(第二个)
然后:
隐藏按钮 要添加 ref=“importbtn” (第一个)
第二个按钮要写一个点击事件 @click=“beforeAvatarUpload()”。(第二个)

原理就是通过点击第二个按钮来添加判断、校验等一系列操作,通过后 this. r e f s . i m p o r t b t n . refs.importbtn. refs.importbtn.el.click()
触发隐藏按钮点击事件(第一个按钮)

beforeAvatarUpload() {
if (!this.multipleSelection1.length) {
return this.KaTeX parse error: Expected 'EOF', got '}' at position 81: …ext: '确定' }) }̲ else { this.refs.importbtn.$el.click() //很重要
}
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,您可以通过以下步骤在 Vue 中实现文件校验和的计算以及校验失败时的提示: 1. 安装依赖 您需要安装两个依赖:crypto-js 和 vue-sweetalert2。crypto-js 用于计算文件校验和,vue-sweetalert2 用于显示提示。 ```bash npm install crypto-js vue-sweetalert2 ``` 2. 创建文件选择器 在模板中添加一个文件选择器,用于让用户选择要导入的文件。您可以使用 input 标签的 type 属性为 file 来创建文件选择器。 ```html <template> <div> <input type="file" ref="fileInput" @change="onFileChange" /> </div> </template> ``` 3. 监听文件选择器的 change 事件 当用户选择文件后,文件选择器会触发 change 事件。在 Vue 组件中,您可以使用 @change 指令监听 change 事件,并调用 onFileChange 方法处理文件。 ```html <template> <div> <input type="file" ref="fileInput" @change="onFileChange" /> </div> </template> <script> import CryptoJS from 'crypto-js'; import Swal from 'vue-sweetalert2'; export default { methods: { onFileChange(event) { const file = event.target.files[0]; // 校验文件类型和大小等规则 if (file.type !== 'text/plain') { Swal.fire('错误', '只能导入文本文件', 'error'); return; } if (file.size > 1024 * 1024) { Swal.fire('错误', '文件大小不能超过1MB', 'error'); return; } // 计算文件校验和 const reader = new FileReader(); reader.onload = () => { const data = reader.result; const checksum = CryptoJS.MD5(data).toString(); // 比较校验和并给出提示 if (checksum !== 'a7f4bf8b2fb17f5b8a52e4d7a6c6d9c9') { Swal.fire('错误', '文件校验失败', 'error'); return; } // TODO: 文件校验通过,进行导入操作 }; reader.readAsText(file); }, }, }; </script> ``` 在 onFileChange 方法中,首先根据文件类型和大小等规则判断文件是否符合要求。如果不符合要求,使用 vue-sweetalert2 显示错误提示,并返回。如果文件符合要求,使用 FileReader 对象读取文件内容,并使用 crypto-js 计算文件校验和。最后,与预期的校验和进行比较,如果校验和不匹配,使用 vue-sweetalert2 显示错误提示。 注意,上述代码中的预期校验和是硬编码的。在实际应用中,您应该根据具体情况生成预期的校验和,并将其保存在后端或前端配置文件中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值