如何在 vue npm 包中调用函数？答案

【问题标题】：How to call a function inside a vue npm package?如何在 vue npm 包中调用函数？
【发布时间】：2019-12-21 23:58:06
【问题描述】：

我想做的是显示和修改汽车“在我的情况下”的图像，所以我使用vue-upload-multiple-image 包保存图像并且运行良好，但是当我回调这些图像时到我被卡住的同一个包裹。我将已存储的图像转换为base64 现在我想要的是图像列表转到该包内的特定功能，因此当我尝试更新汽车时它会显示图像。

这是我要调用的函数：

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

我尝试console.log该函数正常输出undefined，我想到了道具，但它对我有什么帮助。

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

我想要的只是在我的 editcar 组件中调用此函数并将转换器图像发送给它。感谢您帮助我并阅读本文。

【问题讨论】：

标签： javascript vue.js npm webpack vue-component

【解决方案1】：

我找到了问题的解决方案：在文档中有 dataImages 道具。我是这样使用的：

<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>

它必须是图像base64，所以这里是数据的函数。

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

这是方法：

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

【讨论】：