lian-yue / vue-upload-component

Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter
Apache License 2.0
2.67k stars 699 forks source link

How to get width / height of image uploaded with vue-upload-component ? #379

Closed sergeynilov closed 3 years ago

sergeynilov commented 3 years ago

Hello , with Vuejs3("vue": "^3.0.0") and "vue-upload-component": "^3.0.47" app I make upload of image :

                           <file-upload
                               ref="upload"
                               v-model="imageFiles"
                               post-action="/post.method"
                               put-action="/put.method"
                               @input-file="inputFile"
                               @input-filter="inputFilter"
                               class="btn btn-outline-primary btn-sm form_action_btn m-2 ml-4 mr-4 a_link nowrap_block"
                           >
                               <i :class="'i_link pt-1 '+getHeaderIcon('upload')"></i>
                               Select file
                           </file-upload>
        ...

      function inputFile (newFile, oldFile) {
        categoryImageFile.value = newFile
        if (newFile && oldFile && !newFile.active && oldFile.active) {
          if (newFile.xhr) {
            //  Get the response status code
            console.log('status', newFile.xhr.status)
          }
        }
      }

      function inputFilter (newFile, oldFile, prevent) {
        if (newFile && !oldFile) {
          // Filter non-image file
          if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
            return prevent()
          }
        }
        isImagePreviewLoaded.value = true

        // Create a blob field
        newFile.blob = ''
        let URL = window.URL || window.webkitURL
        if (URL && URL.createObjectURL) {
          newFile.blob = URL.createObjectURL(newFile.file)
        }
      }

The outputted image has properties: imageFiles::[ { "fileObject": true, "size": 22608, "name": "Tours_soon.jpg", "type": "image/jpeg", "active": false, "error": "", "success": false, "putAction": "/put.method", "postAction": "/post.method", "timeout": 0, "id": "txmseh6ik89", "file": "[object File]", "response": {}, "progress": "0.00", "speed": 0, "data": {}, "headers": {}, "blob": "blob:http://localhost:8080/d887826b-62fa-40ac-b1e7-751fa26b42ee" } ]

How to get width / height of uploaded image ?

Thanks!

lian-yue commented 3 years ago

https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Full.vue#L542