Vuex 및 FIrebase를 사용하여 여러 이미지를 저장하십시오.(이미지가 업로드될 때까지 대기)

Vuex 및 FIrebase를 사용하여 여러 이미지를 저장하십시오.(이미지가 업로드될 때까지 대기)

이 질문은 이미 다음과 같은 해답을 가지고 있다.

여러 이미지를 Firebase Storage에 업로드하고 여러 다운로드를 반환하는 방법URL (1개 답변)

닫힌2년 전.

여러 개의 이미지를 소방서에 업로드할 수 있는 해결책이 있어핸드폰에 잘 어울리는 부에크로파 플러그인에서 이미지를 얻는다.모든 이미지에 대해 BLOB 파일을 생성한다.그리고 나서 나는 그것들을 소방 저장소에 업로드하고, 데이터베이스의 객체 안에 넣은 URL을 받는다.(이것은 등록도구를 위한 프로젝트 입니다.

Vuex 코드(JS):

createTool ({ commit }, payload) {
  let toolData = {
    croppas: payload.croppas,
    title: payload.title
  }
  var imageURLS = []
  // for Each image in images (croppas (plugin for vue btw) to get blob(s))
  toolData.croppas.forEach(file => {
      file.generateBlob(
          blob => {
            if (blob != null) {
            let rand = (Math.random().toString(36).substring(2, 16) + Math.random().toString(36).substring(2, 16)).toUpperCase()
            let imageRef = firebase.storage().ref('toolImages/').child(rand)
            imageRef.put(blob)
              .then( data => {
                imageRef.getDownloadURL()
                  .then( downloadURL => {
                  imageURLS.push(downloadURL)
                })
            })
          }     
          })
  })

  const mergedToolData = {
    title: payload.title,
    URLS: imageURLS
  }

  firebase.database().ref('tools').push(mergedToolData)
    .then((data) => {
      const key = data.key
      commit('createTool', {
        title: payload.title,
        URLS: imageURLS,
        id: key
      })
    })
},

이미지가 업로드되고 다운로드가 수신된다.이미지에 저장하는 URLURLS [].문제는 코드가 "도구" 데이터를 데이터베이스에 업로드하기 전에 모든 URLS를 검색하고 for-loop이 완료될 때까지 기다리지 않는다는 것이다.따라서 URLS는 툴에 등록되지 않는다.해결책은 비동기식 대기 시스템일 것 같은데, 어떻게 해야 할지 정말 모르겠어.

테스트용 .vue 파일:

     <template>
      <v-layout column align-center>
        <v-flex xs12 sm6 class="mt-5">
          <croppa v-for="(c, i) in croppas"
            :key="i"
            v-model="croppas[i]"
            :width="300"
            :height="300"
            :placeholder="'Choose an image'"
            @new-image="croppas.push({})"
            v-show="i === croppas.length - 1 || c.imageSet">
          </croppa>
          <croppa
            :v-if="this.croppas == ''"
            :width="300"
            :height="300"
            :placeholder="'Choose an image'"
            @new-image="croppas.push({})">
          </croppa>
          </v-flex>
          <v-flex xs12 class="my-4">
            <v-btn @click="onCreateTool" color="#D08513" dark class="darkCustomBtn">Upload</v-btn>
            <v-btn to="/tools" flat class="customBtn ml-3" >Cancel</v-btn>
          </v-flex>
      </v-layout>
    </template>

    <script>
    export default {
      data () {
        return {
          title: '',
          croppas: []
        }
      },
      methods: {
        onCreateTool() {      
          this.$store.dispatch('createTool', { croppas: this.croppas, title: this.title })

        }
      }
    }
    </script>

답은 이미 존재한다: 답.정확히 당신이 찾고 있는 것은 :)이다.
여러 가지 방법으로 하는 건데, 이건 정말 코드에 있고 구글 오류 처리기가 있어.

참조URL: https://stackoverflow.com/questions/56303812/store-multiple-images-with-vuex-and-firebase-wait-for-images-to-upload