时间戳

首页 > 解决方案 > 在 Vue.js 中上传之前检查文件的宽度和高度？

vue.js - 在 Vue.js 中上传之前检查文件的宽度和高度？

问题描述

我有一个案例，我需要检查我上传的文件的高度、宽度和大小。我检查了大小并将其包含在条件表达式中。但我不能以同样的方式得到高度和宽度。我读过关于使用 anew Image()但是当我在代码中使用它时，它不能很好地工作。也许我没有把它放在正确的地方。下面是我现在的代码，只是可以检查文件的大小。

onFileInputChange(event: any): FileReader {
    let files = event.target.files || event.dataTransfer.files
    let reader = new FileReader()
    reader.readAsDataURL(files[0])
    return reader
  }

  onThemeChange(event: any) {
let imageType = ['image/png', 'image/gif', 'image/jpeg']
this.onFileInputChange(event).onload = (e: any) => {
  const image = new Image()
  image.src = this.upload_header
  image.onload = () => {
    if (
      event.target.files.length > 0 &&
      event.target.files[0].size < 26214400 &&
      imageType.includes(event.target.files[0].type) &&
      image.width > 500 &&
      image.height > 100
    ) {
      this.upload_header = e.target.result
      console.log(image)
      console.log(image.height)
    } else {
      this.errorUploadFile = true
    }
  }
}

我希望如果所有条件都满足，所选文件（在这种情况下是图像）将替换现有文件。我已经编辑了我的代码。

在此处输入图像描述

标签： vue.jsfile-upload

解决方案

试试下面的。

      this.image.size = file.size;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = evt => {
        let img = new Image();
        img.onload = () => {
          this.image.width = img.width;
          this.image.height = img.height;
          this.imageLoaded = true;
        }
        img.src = evt.target.result;
      }

您想尝试以下方法吗？

这是我测试的源代码。

  <div>
    <input type="file" @change="onThemeChange" />
    {{ meta }}
  </div>

 export default class ComponentName extends Vue {
     meta: any = null;
    
        onThemeChange(event: any) {
          const file = event.target.files[0];
    
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = (evt: any) => {
            let img = new Image();
            const meta = (img.onload = () => {
              return {
                size: event.target.files[0].size,
                width: img.width,
                height: img.height,
              };
            });
            img.src = evt.target.result;
            this.meta = meta();
          };
        }
    }

推荐阅读