將文件上傳到firebase存儲不起作用（「存儲/無效參數」）

Question

我試圖在上傳時顯示圖像，然後將該圖像添加到firebase。我能夠顯示圖像，但是當我嘗試上傳時，我收到了一個我一直無法弄清楚的錯誤信息。這裏是我的代碼

HTML

<input type="file" accept="image/*" onchange="showMainImage(this)" /> 
    <br/> 
<img id="thumbnil" style="width:40%; margin-top:10px;" src="" alt="image"/> 

JS

function showMainImage(fileInput) { 
    var files = fileInput.files; 
    for (var i = 0; i < files.length; i++) {   
     var file = files[i]; 
     var imageType = /image.*/;  
     if (!file.type.match(imageType)) { 
      continue; 
     }   
     var img=document.getElementById("thumbnil");    
     img.file = file;  
     var reader = new FileReader(); 
     reader.onload = (function(aImg) { 
      return function(e) { 
       aImg.src = e.target.result; 
      }; 
     })(img); 
     reader.readAsDataURL(file); 
    } 

    firebase.auth().onAuthStateChanged((user) => { 
    if (user) { 

     database = firebase.database(); 

     var BusinessesId = firebase.auth().currentUser.uid; 

//Get file 

     var filename = files.name; 

     //Create storage reference 
     var storageRef = firebase.storage().ref("ProductImages/"+BusinessesId+"/"+filename); 

     //Upload file 
     var task = storageRef.put(files).then(function(snapshot) { 
       console.log('Uploaded', snapshot.totalBytes, 'bytes.'); 
       var url = snapshot.downloadURL; 
       // productImageUrl.value = url; 
       console.log('File available at', url); 
       // [START_EXCLUDE] 
       }).catch(function(error) { 
       // [START onfailure] 
       console.error('Upload failed:', error); 
       // [END onfailure] 
       }); 
       // [END oncomplete] 


       } 

    }) 

} 

我得到這個從控制檯

{T： 「存儲/無效參數的」，E ：「Firebase存儲：位於索引0的put中的無效參數：預期的Blob或文件」，n：null，r：「FirebaseErr或「} 代碼 ： （...） Ë ： 」「 預期BLOB或文件：火力地堡貯存：在索引0 put參數無效。

來自錯誤信息我認爲文件沒有正確格式化。我如何解決這個錯誤並上傳文件？

Answer 1

該方法把第一個參數作爲非空Blob，非空Uint8Array或非空ArrayBuffer。 https://firebase.google.com/docs/reference/js/firebase.storage.Reference#put

考慮改用putString方法，所以你可以把所有的字符串在任何你想要的格式。 https://firebase.google.com/docs/reference/js/firebase.storage.Reference#putString

你應該首先轉換你的對象。

這是我的執行：我也用了STATE_CHANGED監控圖像的上傳百分比：

self.uploadPicture = function() { 
    var userId = self.user().uid; 
    var storageRef = firebase.storage().ref().child('images/'+userId); 
    var data = self.fileData().dataURL(); 
    var uploadTask = storageRef.putString(data, 'data_url'); 
    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed' 
     function(snapshot) { 
     // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded 
     var progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100; 
     self.percentage(Math.round(progress)); 
     }, function(error) { 
      toastr.error(error.code,error.message); 
    }, function() { 
     toastr.success("Immagine profilo Aggiornata"); 
     self.savedPicture(true); 
    });