element ui上传限制图片格式及宽高像素问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui上传限制图片格式及宽高像素问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

有时候需求需要限制图片上传格式及宽高像素的问题

比如上传图片的像素值的最大尺寸264*300文章来源地址https://www.toymoban.com/news/detail-775819.html

VUE

              <el-upload
                :file-list="facePicList"
                :action="uploadUrl"
                list-type="picture-card"
                accept=".png"
                :limit="1"
                :on-exceed="masterFileMax" // 限制文件数量提示
                :before-upload="detailBeforeUpload" // 上传前的方法，在这里去限制
                :on-preview="handlePictureCardPreview" // 图片放大查看方法
                :on-success="facePicSuccess"
                :on-remove="facePicRemove"
                :headers="myHeaders" // 添加请求头
              >
                <i class="el-icon-plus"></i>
                // 需要提示信息
                <div slot="tip" class="el-upload__tip">
                  只能上传png文件,图片最大尺寸264*300像素
                </div>
              </el-upload>

下面将在方法里去限制图片的上传类型和像素值限制

JS

    // 图片放大查看
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

	// 上传前的方法
    detailBeforeUpload(file) {
      let types = ["image/png"];
      const isImage = types.includes(file.type);
      // 限制上传的格式
      if (!isImage) {
        this.$message.error("上传图片只能是 PNG 格式!");
      } else {
      	// 这个方法就是去限制上传图片的像素控制
        return this.checkImageWH(file, 264, 330);
        // return this.checkImageWH(file, 2000, 2000);
      }
    },
    // 配置图片像素
    checkImageWH(file, width, height) {
      let self = this;
      return new Promise(function (resolve, reject) {
        let filereader = new FileReader();
        filereader.onload = (e) => {
          let src = e.target.result;
          const image = new Image();
          image.onload = function () {
            if (width && this.width > width) {
              self.$message.warning(
                "请上传宽为小于或等于" + width + "像素的图片"
              );
              reject();
            } else if (height && this.height > height) {
              self.$message.warning(
                "请上传高度小于或等于" + height + "像素的图片"
              );
              reject();
            } else {
              resolve();
            }
          };
          image.onerror = reject;
          image.src = src;
        };
        filereader.readAsDataURL(file);
      });
    },

到了这里，关于element ui上传限制图片格式及宽高像素问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！