为什么获得图像宽度有时效果很好,但有时在Vue.js中却无法呢?

溢出

我想检查上传图像的宽度和高度。因此,我使用JS来获取那些,但是它返回0。有时它可以工作,但通常不起作用。我不知道原因,所以请让我知道发生这种情况的原因。

<label class="add-label" title="イメージ追加" v-if="!uploadedImage">
  <i class="material-icons add-rich-image" v-if="!uploadedImage">add</i>
  <input type="file" @change="onFileChange" class="imageBtn" ref="richImage" accept="img/*">
</label>
<div class="richmenu-img-area">
  <img class="richmenu-img" :src="uploadedImage" ref="uploaded" ondragstart="return false">
</div>
onFileChange(e){
  let files = e.target.files || e.dataTransfer.files;
  if(!files[0].type.match(/image.*/)){
    alert("イメージファイルをアップロードしてください。")
    return;
  }
  this.imageFile = files[0]
  this.createImage(files[0]);
},
createImage(file){
  let reader = new FileReader();
  let image = new Image();
  reader.onload = (e) => {
    image.src = e.target.result;
    console.log(image.width)//********************* sometimes ok but sometimes 0
    console.log(image.height)//********************* sometimes ok but sometimes 0
    this.uploadedImage = e.target.result;
  }
  reader.readAsDataURL(file);
},
气候

问题

要重现您的问题,请使用下面的代码片段,然后执行以下步骤:

  1. 上传一个文件。
  2. 上载另一个文件。
  3. 在步骤1中上传相同的文件。

const input = document.getElementById('input');

input.addEventListener('change', createImage);


function createImage(e){
  const files = e.target.files || e.dataTransfer.files;

  const reader = new FileReader();
  const image = new Image();
  
  reader.addEventListener('load', function(e){
    image.src = e.target.result;
    console.log(image.width, image.height);
  });
  
  reader.readAsDataURL(files[0]);
}
<input id="input" type="file" accept="image/*">

说明

您应该看到返回的前2个上传,返回0 0的第三个上传正确的图像宽度和高度。

这是因为在元数据(即宽度和高度)可用之前,需要完全加载图像。

再次上传相同文件会产生正确结果的原因是,图像是从以前加载的,并由浏览器保存在缓存中。因此,下次您尝试加载它时,浏览器已经具有该信息以传递给您的代码。

如果您需要获取,.width并且.height每次上传文件时,都应侦听图像元素的加载时间:

const input = document.getElementById('input');

input.addEventListener('change', createImage);


function createImage(e){
  const files = e.target.files || e.dataTransfer.files;

  const reader = new FileReader();
  const image = new Image();

  // Get the image data only after it is loaded.
  image.addEventListener('load', function(e){
    console.log(image.width, image.height);
  });
  
  reader.addEventListener('load', function(e){
    image.src = e.target.result;
  });
  
  reader.readAsDataURL(files[0]);
}
<input id="input" type="file" accept="image/*">

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在AVR中,为什么有时有时只取带符号的数字的二进制补码?

来自分类Dev

为什么有时在Javascript中,函数参数前会有美元符号($ arg)?

来自分类Dev

为什么有时我们快速使用-> void作为完成处理程序,但有时却不使用呢?

来自分类Dev

CloudKit操作在开发版本中执行,但有时在生产版本中挂起

来自分类Dev

为什么OneDrive js选择器有时具有空打开器

来自分类Dev

为什么有时有时无法编辑Google表格公式行距?

来自分类Dev

为什么有时可以使用NodeJS缓冲区连接音频数据,而有时却不能呢?

来自分类Dev

为什么有时无法覆盖类函数?

来自分类Dev

我认为我不完全了解realloc,有人可以向我解释为什么我的代码中的realloc有时会失败,但有时却不会

来自分类Dev

为什么有时在匹配中取消引用变量?

来自分类Dev

在Scala 2.13中,为什么有时有时无法显式地召唤类型类?

来自分类Dev

为什么单击按钮时JavaScript有时无法正常工作?

来自分类Dev

为什么有时在PHP中无法使用此附加功能?

来自分类Dev

在JS ES6中,为什么导出默认值却无法单独导出呢?

来自分类Dev

为什么我有时会出错而有时却没有呢?

来自分类Dev

jQuery滚动事件的计时问题(有时效果很好,有时会延迟)

来自分类Dev

imagesloaded插件有时无法正确加载图像

来自分类Dev

为什么nmap似乎无法查看我的android设备,有时会看到它们,但有时却看不到

来自分类Dev

为什么有时我的键盘在Chrome和Opera中无法正常工作?

来自分类Dev

为什么Ajax有时会对序列化的数据进行urlencode,而有时却不会呢?

来自分类Dev

为什么我的解析任务有时无法完成?

来自分类Dev

为什么有时在BeginInvoke块中得到NullReferenceException?

来自分类Dev

在htop的命令列中,有时显示完整路径,有时则不显示。为什么?

来自分类Dev

为什么有时(在一个线程中)效果对其他线程不可见?

来自分类Dev

为什么OneDrive js选择器有时具有空打开器

来自分类Dev

为什么“尝试/捕获”中的命令有时需要-ErrorAction停止,而有时则不需要?

来自分类Dev

有时alamofireImage无法加载图像

来自分类Dev

在 Ruby on Rails 中,为什么有时在控制器中是复数有时是单数?

来自分类Dev

Vue.js 有时无法加载组件

Related 相关文章

  1. 1

    在AVR中,为什么有时有时只取带符号的数字的二进制补码?

  2. 2

    为什么有时在Javascript中,函数参数前会有美元符号($ arg)?

  3. 3

    为什么有时我们快速使用-> void作为完成处理程序,但有时却不使用呢?

  4. 4

    CloudKit操作在开发版本中执行,但有时在生产版本中挂起

  5. 5

    为什么OneDrive js选择器有时具有空打开器

  6. 6

    为什么有时有时无法编辑Google表格公式行距?

  7. 7

    为什么有时可以使用NodeJS缓冲区连接音频数据,而有时却不能呢?

  8. 8

    为什么有时无法覆盖类函数?

  9. 9

    我认为我不完全了解realloc,有人可以向我解释为什么我的代码中的realloc有时会失败,但有时却不会

  10. 10

    为什么有时在匹配中取消引用变量?

  11. 11

    在Scala 2.13中,为什么有时有时无法显式地召唤类型类?

  12. 12

    为什么单击按钮时JavaScript有时无法正常工作?

  13. 13

    为什么有时在PHP中无法使用此附加功能?

  14. 14

    在JS ES6中,为什么导出默认值却无法单独导出呢?

  15. 15

    为什么我有时会出错而有时却没有呢?

  16. 16

    jQuery滚动事件的计时问题(有时效果很好,有时会延迟)

  17. 17

    imagesloaded插件有时无法正确加载图像

  18. 18

    为什么nmap似乎无法查看我的android设备,有时会看到它们,但有时却看不到

  19. 19

    为什么有时我的键盘在Chrome和Opera中无法正常工作?

  20. 20

    为什么Ajax有时会对序列化的数据进行urlencode,而有时却不会呢?

  21. 21

    为什么我的解析任务有时无法完成?

  22. 22

    为什么有时在BeginInvoke块中得到NullReferenceException?

  23. 23

    在htop的命令列中,有时显示完整路径,有时则不显示。为什么?

  24. 24

    为什么有时(在一个线程中)效果对其他线程不可见?

  25. 25

    为什么OneDrive js选择器有时具有空打开器

  26. 26

    为什么“尝试/捕获”中的命令有时需要-ErrorAction停止,而有时则不需要?

  27. 27

    有时alamofireImage无法加载图像

  28. 28

    在 Ruby on Rails 中,为什么有时在控制器中是复数有时是单数?

  29. 29

    Vue.js 有时无法加载组件

热门标签

归档