我在组件中将图像编码为base64,然后将其推入相关数组。
父组件
<v-tab-item v-for="(item, index) in colItems" :key="index">
<base64 :index="index" :multiple="true" :done="getFiles(index)">
colItems: [
title: '',
colItemImgs: '',
]
简化的子组件
<div>
<v-btn raised @click="onPickItemFile(index)">base64</v-btn>
<input type="file" @change="onChange" style="display: none" ref="64input" />
</div>
<script>
export default {
props: {
done: {
type: Function,
default: () => {}
},
index: '',
},
methods: {
onChange (e) {
// Removed base64 reader images for simplification
let files = e.target.files;
let fileInfo = {
name: file.name,
type: file.type,
size: Math.round(file.size / 1000)+' kB',
base64: reader.result,
file: file
}
let index = this.index
allFiles.push(fileInfo)
if(allFiles.length == files.length){
if(this.multiple) this.done(allFiles)
else this.done(allFiles[0])
}
}
}
},
onPickItemFile (index) {
this.$refs.base64Input.click()
},
我的问题是,我需要在现有数组中添加和删除img,但是无法将索引返回到父组件。
任何可以提供帮助的人,将不胜感激! 提前致谢。