How to call a function inside a vue npm package?

Question

What I'm trying to do is to display and modify the images that the car has "in my case", so I used the vue-upload-multiple-image package to save the images and went well, but when I call back these images to the same package I got stuck. I convert the images that has been stored to base64 now what I want is the list of images go to specific function inside that package, so it will display the images when I try to update the car.

This is the function I want to call:

createImage(file) {
  let reader = new FileReader()
  let formData = new FormData()
  formData.append('file', file)
  reader.onload = e => {
    let dataURI = e.target.result
    if (dataURI) {
      if (!this.images.length) {
        this.images.push({
          name: file.name,
          path: dataURI,
          highlight: 1,
          default: 1,
        })
        this.currentIndexImage = 0
      } else {
        this.images.push({
          name: file.name,
          path: dataURI,
          highlight: 0,
          default: 0,
        })
      }
      this.$emit(
        'upload-success',
        formData,
        this.images.length - 1,
        this.images,
      )
    }
  }
  reader.readAsDataURL(file)
},

The Function inside this file

I tried to console.log the function normally it outputs undefined , I think of props but how it gonna help me.

mounted(){
  console.log(this.createImage);

What I want is just to call this function inside my editcar component and sent to it the converter images. Thank you for helping me and read the this far.

Answer 1

I Found the solution of the problem: in the doc there is dataImages prop. I use it like this:

<div class="form-group m-form__group">
  <vue-upload-multiple-image
    @upload-success="uploadImageSuccess"
    @before-remove="beforeRemove"
    @edit-image="editImage"
    :dataImages="images"
  ></vue-upload-multiple-image>
</div>

And it must the images base64 so here is the function the the data.

data() {
  return {
    images :[],
  }
},
mounted() {
  this.ConvertImages();
},

This is methods:

methods: {
  ConvertImages() {
    let images = this.car.images
    let image = this.images
    for (var i = 0; i < images.length; i++) {
      this.toDataURL(images[i].path, function(dataURL) {
        image.push({
          path: dataURL,
        })
      })
    }
  },
  toDataURL(url, callback) {
    var xhr = new XMLHttpRequest()
    xhr.onload = function() {
      var reader = new FileReader()
      reader.onloadend = function() {
        callback(reader.result)
      }
      reader.readAsDataURL(xhr.response)
    }
    xhr.open('GET', url)
    xhr.responseType = 'blob'
    xhr.send()
  },
}, //END OF METHODS