element-ui 判断文件大小,文件大小不能超过2M

          <el-upload
              class="upload-demo"
              ref="upload"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :limit="1"
              accept=".xls,.xlsx"
              :on-preview="handlePreview"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              :before-upload="beforeAvatarUpload"
              :file-list="fileList"
              :auto-upload="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将发货表单拖到此处,或<em>点击选择</em></div>
          </el-upload>
      beforeAvatarUpload(file){
          console.log(file)
            const isLt2M = file.size / 1024 / 1024 < 2;

            if(!isLt2M) {
                this.$message({
                    message: '上传文件大小不能超过 2MB!',
                    type: 'warning'
                });
            }
            return   isLt2M

      },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了实现element-ui上传视频,需要进行以下步骤: 1.在HTML文件中添加el-upload组件,设置action属性为上传视频的URL地址,设置before-upload属性为一个函数,用于在上传视频之前进行格式、大小、时长的限制。 2.在Vue实例中定义beforeUpload函数,该函数接收一个file参数,用于判断视频格式、大小、时长是否符合要求。如果符合要求,返回true,否则返回false。 3.在CSS文件中定义上传组件的样式,包括边框、光标、字体大小、颜色等。 下面是一个示例代码,用于实现element-ui上传视频: ```html <template> <el-upload class="upload-demo" action="/upload" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" :file-list="fileList" multiple> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传mp4格式的视频,且不超过100MB,时长不超过10分钟</div> </el-upload> </template> <script> export default { data() { return { fileList: [] }; }, methods: { beforeUpload(file) { const isMp4 = file.type === 'video/mp4'; const isLt100M = file.size / 1024 / 1024 < 100; const video = document.createElement('video'); const URL = window.URL || window.webkitURL; video.src = URL.createObjectURL(file); return new Promise((resolve, reject) => { video.onloadedmetadata = () => { if (isMp4 && isLt100M && video.duration <= 600) { resolve(); } else { reject('上传视频格式、大小或时长不符合要求'); } }; }); }, handleSuccess(response, file, fileList) { console.log(response, file, fileList); }, handleError(err, file, fileList) { console.log(err, file, fileList); } } }; </script> <style> .upload-demo { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .upload-demo:hover { border-color: #409EFF; } .el-upload__tip { font-size: 14px; color: #606266; margin-top: 10px; } </style> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值