предисловие

Я столкнулся с проблемой в процессе разработки с использованием vue+elementUI:загрузить, чтобы проверить ширину и высоту изображения

В начале я напрямую гуглил Baidu и обнаружил что такой проблемы нет.Это должно быть очень распространенное требование.Почему элемент не реализован?Может все очень просто.В интернете такой проблемы нет.Я зашел на сайт GitHub issue., действительно есть похожая проблема, но системного решения нет, круто.

Поскольку вы не можете его найти, вы можете только возиться с ним самостоятельно.

идеи

Если вы хотите выполнить проверку ширины и высоты изображения, вы должны сначала получить информацию о ширине и высоте изображения: image.onload

Событие onload выполняется сразу после загрузки изображения.

let image = new Image();
image.onload = function() {
    let width = image.width;
    let height = image.height;
};
image.src = "images/bg.jpg";

Получив информацию, можно сравнить, например, мне нужна картинка размером 750*420.

let width = 750;  //图片宽度
let height = 420; //图片高度
let image = new Image();
image.onload = function() {
    let isSize = image.width == width && image.height == height;
    if (!isSize) {
        that.$message.error("上传头像图片尺寸不符合,只能是750*420");
    }
};
image.src = "images/bg.jpg";

Теперь я хочу получить информацию о загруженном изображении

beforeAvatarUpload(file) {
    // 上传图片前处理函数
    let width = 750;  //图片宽度
    let height = 420; //图片高度
    let _URL = window.URL || window.webkitURL;
    let image = new Image();
    img.onload = function() {
        let isSize = image.width == width && image.height == height;
        if (!isSize) {
            that.$message.error("上传头像图片尺寸不符合,只能是750*420");
        }
        return isSize;
    };
    img.src = _URL.createObjectURL(file);
}

Теперь isSize действительно был переназначен, и есть правильное приглашение, но оно просто промелькнуло и успешно загружено, очень удручает, я начал шаг за шагом отлаживать, и обнаружил, что я могу вернуться к возврату в конце, но я не Я не знаю, в чем причина, а затем снова начал гуглить и обнаружил, что мое мышление было неправильным.

Внимательно прочитайте эту статью о НаггетсСценарий приложения JS (Promise => загрузка изображения), обнаружил, что загружающие люди действительно хотят обещание внутри, вы напрямую даете isSize логическое значение и, наконец, возвращаете его, это не имеет никакого эффекта, что объясняет, почему сообщение об ошибке может появиться, но оно может быть успешно загружено, это реализация только что метод.

Давайте посмотрим на исходный код.

upload(rawFile) {
    this.$refs.input.value = null;
    if (!this.beforeUpload) {
    return this.post(rawFile);
    }
    const before = this.beforeUpload(rawFile);
    if (before && before.then) {
    before.then(processedFile => {
        const fileType = Object.prototype.toString.call(processedFile);
        if (fileType === '[object File]' || fileType === '[object Blob]') {
        if (fileType === '[object Blob]') {
            processedFile = new File([processedFile], rawFile.name, {
            type: rawFile.type
            });
        }
        for (const p in rawFile) {
            if (rawFile.hasOwnProperty(p)) {
            processedFile[p] = rawFile[p];
            }
        }
        this.post(processedFile);
        } else {
        this.post(rawFile);
        }
    }, () => {
        this.onRemove(null, rawFile);
    });
    } else if (before !== false) {
         this.post(rawFile);
    } else {
         this.onRemove(null, rawFile);
    }
},

Только потом я обнаружил, что this.beforeUpload — настоящий промис. Вы должны вернуть промис другим. Простое логическое значение бесполезно, потому что существует еще много реализаций промисов. Теперь, когда это понятно, это пойдет по течению , С окончательным методом, после различных тестов, это действительно возможно.

Окончательная версия кода

beforeAvatarUpload(file) {
    // 上传图片前处理函数
    const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
    const isLt2M = file.size / 1024 / 1024 < 2;
    let that = this;
    let isAllow = false;
    if (!isJPG) {
        this.$message.error("上传头像图片只能是 jpg、png、gif 格式!");
    }
    if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
    }
    const isSize = new Promise(function(resolve, reject) {
        let width = 750;
        let height = 420;
        let _URL = window.URL || window.webkitURL;
        let image = new Image();
        image.onload = function() {
          let valid = image.width == width && image.height == height;
          valid ? resolve() : reject();
        };
        image.src = _URL.createObjectURL(file);
    }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error("上传头像图片尺寸不符合,只能是750*420!");
          return Promise.reject();
        }
      );
    return isJPG && isLt2M && isSize;
}

Прочитав окончательную версию кода, я обнаружил, что это действительно очень просто. Мы часто возглавляем сбивцами нашим присущим мышлением. На самом деле, наши навыки не являются глубокими. В будущем мы должны уделять больше внимания основаниям, Копать больше деталей, см. Большое из маленьких и культивируйте внутренние навыки. Взаимное поощрение!