簡體   English   中英

如何在vue npm包中調用函數?

[英]How to call a function inside a vue npm package?

我想做的是顯示和修改汽車“以我為例 ”的圖像,因此我使用了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)
},

該文件中的功能

我試圖console.log該函數通常會輸出undefined ,我想到的道具,但它會如何幫助我。

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

我想要的只是在我的editcar組件中調用此函數,並將其發送給轉換器圖像。 感謝您的幫助,並閱讀了本文。

我找到了問題的解決方案:在文檔中有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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM