@flokiowl
HTML-верстальщик

Как загрузить несколько изображений в firebase с vue (+vuex)?

Добрый вечер. Я учусь писать приложения на 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
            }
        }
}


Заранее спасибо всем, кто поможет разобраться!
  • Вопрос задан
  • 195 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы