将文件上传到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); 
    });