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 里面


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM