zoukankan      html  css  js  c++  java
  • vue element 上传图片限制大小, before-upload 不生效问题

    1、template:

    <el-upload
                action= ''
                list-type="picture-card"
                :auto-upload="false"
                :show-file-list='true'
                :file-list="certificates"
                :on-preview="showimg"
                :on-change="handlePictureCardPreview"
                :limit="8"
                accept=".jpg,.jpeg,.png,.JPG,.JPEG"
                :on-exceed="handleExceed"
                :on-remove="handleRemove">
                <i class="el-icon-plus"/>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="showimgs" alt="">
              </el-dialog>
    

    2、绑定事件:

    handlePictureCardPreview(file, fileList) {
          const isLt5M = file.size <  1024 * 1024;
          if (!isLt5M) {
            this.$message.error('上传图片大小不能超过 1M!');
            fileList.splice(-1,1); //移除选中图片
            return false;
          }
    }
    

    注:

      因为  before-upload 是指在文件上传之前、文件已被选中,但还没上传的时候触发,而设置了 :auto-upload="false" 后,文件上传事件不被再次调用,,所以 before-upload 不生效,所以,限制图片大小的时候,需绑定在  :on-change 里面

  • 相关阅读:
    FLASH开发[00]
    slickedit使用小技巧
    网络编程[34]
    网络编程[39]
    网络编程[41]
    网络编程[37]
    网络编程[32]
    网络编程[35]
    Apache安装和配置
    网络编程[40]
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/13725022.html
Copyright © 2011-2022 走看看