获取由vue上传组件图像上传的宽度/高度。

Question

查看上传文件时vue-upload组件(https://lian-yue.github.io/vue-upload-component/#/documents)是如何处理事件的，我看到了带有上载文件的avatarFiles数组的结构：

            <file-upload
                    ref="upload"
                    v-model="avatarFiles"
                    post-action="/post.method"
                    put-action="/put.method"
                    @input-file="inputFile"
                    @input-filter="inputFilter"
                    :multiple="false"
                    class="btn btn-outline-danger btn-sm"
            >
                Upload avatar
            </file-upload>

我看不到任何上传文件的宽度/高度。如果有什么方法来添加这个信息呢？或者其他一些获取上传文件的宽度/高度的方法？

vuejs 2.6

当图片上传时，我尝试检查事件：

改性:

watch:{
    avatarFiles(file){
        console.log("-1 avatarFiles file::")
        console.log( file )

        var image = new FileReader();
        console.log("-2 avatarFiles image::")
        console.log( image )
        image.onload = () => {
            console.log("-3 avatarFiles file::")
            console.log( file )
            console.log(`the image dimensions are ${img.width}x${img.height}`);
        }
    }

},

但是没有触发image.onload，在控制台中我看到了一些错误消息：https://imgur.com/a/40epviI

怎么了？

Answer 1

试着观察您的avatarFiles模型，然后使用FileReader读取文件。

示例代码：

watch:{
   avatarFiles(file){
          var image = new FileReader();
          image.onload = () => {
           console.log(`the image dimensions are ${image.width}x${image.height}`);
          }
      }

    }