ant design vue 获取上传图片的像素

获取图片的像素大小,使用上传文件之前的钩子 beforeUpload,参数为上传的文件。

<a-upload
      name="file"
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      :multiple="false"
      :before-upload="beforeUpload"
      :action="uploadUrl"
      @change="handleChangeFile"
>

  

       beforeUpload(file) {
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {
                const image = new Image();
                image.src = reader.result;
                image.onload = () => {
                    this.imgWidth = image.width;
                    this.imgHeight = image.height;
                    console.log(this.imgWidth, this.imgHeight); //文件像素大小
    
                }
            }
            const isJpgOrPng =
                file.type === "image/jpeg" || file.type === "image/png";
            if (!isJpgOrPng) {
                this.$message.error("仅可上传jpg和png文件");
            }
            const isLt2M = file.size / 1024 / 1024 < 10;
            if (!isLt2M) {
                this.$message.error("图片文件要求小于10M");
            }
            return isJpgOrPng && isLt2M;
        }    

  

posted @ 2021-11-26 17:12  紫诺花开  阅读(909)  评论(0编辑  收藏  举报