Я использую javascript для предварительного просмотра и сохранения файла изображения локально. Я хочу предварительно просмотреть изображение перед загрузкой, я создаю функцию предварительного просмотра изображения, и она работает для добавления данных. Но когда я обновляю элемент, я хочу просмотреть его изображение в диалоговом окне. Я не знаю, как это сделать. Может кто-то помочь мне с этим. вот мой код
pickFile: function () {
this.$refs.image.click()
},
onFilePicked () {
const input = this.$refs.image
const files = input.files
if (files && files[0]) {
const reader = new FileReader()
reader.onload = e => {
this.imageData = e.target.result
console.log(' test ', this.imageData)
}
this.storeLogo = files[0]
reader.readAsDataURL(files[0])
this.$emit('input', files[0])
}
},
updateItem (item) {
this.editedIndex = this.storesList.indexOf(item)
this.editedItem = Object.assign({}, item)
this.imageData = btoa('static/images/storeLogo/' + this.editedItem.image)
if (this.editedItem.country === this.countryID.country_name) {
this.editedItem.country = this.countryID.country_id
if (this.editedItem.state === this.stateID.state_name) {
this.editedItem.state = this.stateID.state_id
if (this.editedItem.city === this.cityID.city_name) {
this.editedItem.city = this.cityID.city_id
}
}
}
this.dialogOpening = true
}
<div class="base-image-input" :style="{ 'background-image': `url(${imageData})` }" @click="pickFile">
<span v-if="!imageData" class="placeholder">
Choose an Image
</span>
<input class="file-input" ref="image" type="file" @input="onFilePicked" />
</div>