码迷,mamicode.com
首页 > 其他好文 > 详细

element-ui el-upload限制图片格式尺寸及图片

时间:2020-05-30 15:29:34      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:属性   点击   item   格式   style   eject   ict   adp   不可   

element-ui el-upload限制图片格式尺寸及图片

html:

<el-form>
    <el-form-item label="上传图片:" >
      <el-upload
         style="width:654px;hight:270px"
         :before-upload="beforeUpload"
         accept="image/png,image/jpg,image/jpeg"
         class="upload-demo"
         name="file"
         ref="upload"
         drag
         :action="uploadPicture"
         :on-success="uploadImgSuc"
         list-type="picture"
         :file-list="fileList"
         :on-error="uploadImgErr">
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将图片拖到此处,或<em>点击上传</em></div>
     </el-upload>
     <span style="color:red">图片尺寸限制为654 x 270,大小不可超过1MB</span>
   </el-form-item>
</el-form>

  

如果要现在图片的尺寸,大小,就在

:before-upload="beforeAvatarUpload"
这个函数里面去定义
js:
// 图片上传尺寸大小检验
      beforeUpload (file) {
        let _this = this
        const is1M = file.size / 1024 / 1024 < 1; // 限制小于1M
        const isSize = new Promise(function (resolve, reject) {
          let width = 654; // 限制图片尺寸为654X270
          let height = 270;
          let _URL = window.URL || window.webkitURL;
          let img = new Image();
          img.onload = function () {
            let valid = img.width === width && img.height === height;
            valid ? resolve() : reject();
          }
          img.src = _URL.createObjectURL(file);
        }).then(() => {
          return file;
        }, () => {
          _this.$message.error(‘图片尺寸限制为654 x 270,大小不可超过1MB‘)
          return Promise.reject();
        });
        if (!is1M) {
          _this.$message.error(‘图片尺寸限制为654 x 270,大小不可超过1MB‘)
        }
        return isSize&is1M
      }

  可上传图片的格式, 为HTML代码段中accept属性:accept="image/png,image/jpg,image/jpeg"

element-ui el-upload限制图片格式尺寸及图片

标签:属性   点击   item   格式   style   eject   ict   adp   不可   

原文地址:https://www.cnblogs.com/yu412/p/12986361.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!