Как загрузить несколько изображений в Firebase Storage и вернуть несколько downloadURL - PullRequest
Новая
       24

Как загрузить несколько изображений в Firebase Storage и вернуть несколько downloadURL

0 голосов
/ 19 октября 2018

Мы работаем над простым приложением электронной коммерции, где нам нужно загрузить несколько изображений товара.Используя Vuejs и Vue-Croppa, нам нужно загрузить изображения в хранилище Firebase, получить URL-адреса для загрузки, а затем включить эти URL-адреса в массив при добавлении этого продукта в нашу базу данных. 

<croppa v-for="(c, i) in croppas"
  :key="i"
  v-model="croppas[i]"
  :width="150"
  :height="150"
  @new-image="croppas.push({})"
  v-show="i === croppas.length - 1 || c.imageSet"
></croppa>

И наш метод: 

addProduct() {
    this.showSuccess = true
    let {details} = this
    this.croppas.forEach(file => {
        file.generateBlob(
            blob => {
                let rand = (Math.random().toString(36).substring(2, 16) + Math.random().toString(36).substring(2, 16)).toUpperCase()
                let imagesRef = storageRef.child('productimages/' + rand)
                let downloadURL
            imagesRef.put(blob).then((snap) => {
            imagesRef.getDownloadURL().then(function(downloadURL) {
              console.log('File available at', downloadURL)
            })
          })
      },
        'image/jpeg',
        0.8
        )
    })

    let shop = this.userStore.id
    let {details} = this
    console.log(shop)
    let createdAt = new Date().toString()
    let createdBy = this.currentUser.uid
    console.log(createdBy)
    let productImageUrl = downloadURL

    fb.productsCollection.add({ details, createdAt, createdBy, shop})
    .then( doc => {
      fb.productsCollection.doc(doc.id).update({
        id: doc.id, 
      })
   })
   .then( doc => {
      fb.productsCollection.doc(doc.id).update({
        productImages: productImageUrl
      })
   })

   setTimeout(() => {
    this.showSuccess = false
   }, 4000)
},

В настоящий момент мы получаем ошибку консоли: 

Firebase Storage: Invalid argument in 'put' at index 0: Expected Blob or File.

Кроме того, productImageUrl = downloadURL будет работать только для одного файла, где потенциально может быть больше.Как я могу заставить это работать с массивом?

1 Ответ

0 голосов
/ 26 ноября 2018

Для вашего второго выпуска .....

Установите обещание для каждого изображения, которое вы хотите загрузить.

Так что в вашем цикле вызовите метод, "похожий" на приведенный ниже (Я только что взял это из одного из моих проектов): 

uploadImageAsPromise (imageFile) {
    const self = this;

        return new Promise(function (resolve, reject) {
            var storageRef = firebase.storage().ref("/imagestestnew/"+imageFile.name);

            //Upload file
            var task = storageRef.put(imageFile);


            //Update progress bar
            task.on('state_changed',
                function progress(snapshot){

                    var percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
                    console.log("percentage" + percentage)
                    self.progressUpload = percentage;
                },
                function error(err){
                    console.log("error")
                },
                function complete(){
                    console.log("done")
                    var downloadURL = task.snapshot.downloadURL;
                }
            );
        });
}
...