获取 vue-upload-component 上传图片的宽/高

Question

查看 vue-upload-component 如何处理事件 (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 方法来获取任何上传文件的宽度/高度？

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}`);
          }
      }

    }