Hello!
Looking how vue-upload-component works (https://lian-yue.github.io/vue-upload-component/#/documents) on events when
file is uploaded I see structure of avatarFiles array with uploaded file:
<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>
I need to get width/height of any uploaded file.
I found a way with watch :
watch: {
avatarFiles(file){
console.log("avatarFiles file::")
console.log( file )
console.log( this.toObject(file) )
let uploadedImage= this.toObject(file)
console.log("uploadedImage[0].blob::")
console.log( uploadedImage[0].blob )
var image = new FileReader(uploadedImage[0].blob);
console.log("-2 avatarFiles image::")
console.log(image)
// console.log('image.width:::')
// console.log(image.width)
image.onload = (e) => {
console.log("INSIDE image.onload e::")
console.log( e )
console.log(`++the image dimensions are ${image.width}x${image.height}`);
}
}
I suppose that file varthat is just uploaded file and console output confirms this.
this.toObject is my method I use to convert from Observer class :
toObject(arr) {
var rv = {};
for (var i = 0; i < arr.length; ++i)
rv[i] = arr[i];
return rv;
},
But code inside of method
image.onload = (e) => {
...
is not triggered at all and in console I see error : https://imgur.com/a/vX60fMA
I see that in var uploadedImage[0].blob -valid path to uploaded image and I sent it for
var image = new FileReader(uploadedImage[0].blob);
Bu
t why error in cosole and how to fix it ?
vuejs 2.6 / vue-slider-component 3.0.33
Thanks!