在Angular 7中验证图像尺寸

Question

这个问题有很多关于JQuery和JavaScript的答案，还有一些版本的Angular。我尝试了很多解决方案，但都没有成功。

我正在使用Angular 7，并且正在尝试验证用户上传的图像的宽度和高度。

以下是我的.html代码片段：

"最初的回答"

<input type="file" name="upload" id="androidPhoneFile" class="upload-box" placeholder="Upload File" multiple="multiple" (change)="onAndroidPhoneChange($event)" formControlName="androidPhone" #androidPhonePhoto>

以下是我的`.ts`组件文件：

这是最初的回答:

AddFilesToFormData(event: any, fileName: string) {
const reader = new FileReader();
const img = new Image();
img.onload = function() {
  const height = img.height;
  const width = img.width;
  console.log('Width and Height', width, height);
};

img.src = event.target.files[0];
if (event.target.files && event.target.files.length) {
  const [file] = event.target.files;
  reader.readAsDataURL(file);
  reader.onload = () => {
    for (let i = 0; i < event.target.files.length; i++) {
      this.formData.append(fileName, event.target.files[i]);
      this.numberOfPhotos++;
    }
  };
}}

- Mohamad Mousheimish

Answer 1

尝试像这样：

AddFilesToFormData(event: any, fileName: string) {
  if (event.target.files && event.target.files.length) {
    for (const file of event.target.files) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const img = new Image();
        img.src = reader.result as string;
        img.onload = () => {
          const height = img.naturalHeight;
          const width = img.naturalWidth;
          console.log('Width and Height', width, height);
        };
      };
    }
  }
}

关于 for 循环：我建议你将其改为类似以下的代码：

    for (const image of event.target.files) {
      this.formData.append(fileName, image);
      this.numberOfPhotos++;
    }

更加清晰易懂了。

- xavier

---

如果我上传了多张图片怎么办？在这种情况下，我将只能看到最后选择的图片的宽度和高度。 - undefined

既然你使用了img.src = event.target.files[0];，我以为你只是上传了一张图片。如果你要上传多张图片，只需要稍微调整一下代码就可以了。我现在尝试修改一下。 - undefined

我添加了一个for循环，但是我无法测试它（之前的代码确实只针对一张图片进行了测试）。我猜它应该能工作。如果不能，你只需要稍微调整一下或者告诉我，我会修复它。 - undefined