有時(shí)候需求需要限制圖片上傳格式及寬高像素的問題

比如上傳圖片的像素值的最大尺寸264*300文章來源地址http://www.zghlxwxcb.cn/news/detail-775819.html

VUE

              <el-upload
                :file-list="facePicList"
                :action="uploadUrl"
                list-type="picture-card"
                accept=".png"
                :limit="1"
                :on-exceed="masterFileMax" // 限制文件數(shù)量提示
                :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 {
      	// 這個(gè)方法就是去限制上傳圖片的像素控制
        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);
      });
    },

到了這里，關(guān)于element ui上傳限制圖片格式及寬高像素問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！