[英]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.