Добрый вечер. Я учусь писать приложения на vuejs, решил сделать портфолио как тренировку, но застрял на одном моменте. Код ниже добавляет одно изображение, но мне нужно несколько, что бы потом использовать в слайдере. Подскажите, как это сделать?
Template:<b-form-file
size="sm"
placeholder="Выберите файл..."
@change="onFileChange"
></b-form-file>
<div class="selected-images">
<img :src="imageSrc" alt="">
</div>
data () {
return {
id:null,
name:'',
description:'',
type:'',
imageSrc:'',
image:null
}
},
method: {
onFileChange (e) {
const file = e.target.files[0]
const reader = new FileReader()
reader.onload = e => {
this.imageSrc = reader.result
}
reader.readAsDataURL(file)
this.image = file
}
}
Вот Vuex:import * as fb from 'firebase'
class Work {
constructor (name, description, type, id = null, imageSrc = '') {
this.name = name,
this.description = description,
this.type = type,
this.id = id
}
}
...
actions: {
async createWork ({commit}, payload) {
commit('clearError')
commit('setLoading', true)
let imageSrc
let key
try {
const newWork = new Work (
payload.name,
payload.description,
payload.type,
''
)
await fb.database().ref('works').push(newWork)
.then((data) => {
key = data.key
return key
})
.then(key => {
const filename = payload.image.name
const ext = filename.slice(filename.lastIndexOf('.'))
return fb.storage().ref('works/' + key + '.' + ext).put(payload.image)
})
.then(snapshot => {
return new Promise((resolve) => {
snapshot.ref.getDownloadURL().then(url => {
snapshot.downloadURL = url
resolve(snapshot)
})
})
})
.then((snapshot) => {
imageSrc = snapshot.downloadURL
return fb.database().ref('works').child(key).update({imageSrc: imageSrc})
})
.then(() => {
commit('setLoading', false)
commit('createWork', {
...newWork,
imageSrc: imageSrc,
id: key
})
})
} catch (error) {
commit('setError', error.message)
commit('setLoading', false)
throw error
}
}
}
Заранее спасибо всем, кто поможет разобраться!