文件上传到 Firebase 存储不起作用（“存储/无效参数”）

Posted 2023-03-22

【中文标题】文件上传到 Firebase 存储不起作用（“存储/无效参数”）

【英文标题】：file upload to firebase storage is not working ("storage/invalid-argument")

【发布时间】：2018-03-17 06:15:03

【问题描述】：

我正在尝试在上传时显示图像，然后将该图像添加到 Firebase。我能够显示图像，但是当我尝试上传时，我收到一条我无法弄清楚的错误消息。这是我的代码

html

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

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: "storage/invalid-argument", e: "Firebase Storage: Invalid argument in put at index 0: Expected Blob or File.", n: null, r: "FirebaseError" 代码 ： (...) e ： “Firebase 存储：索引 0 处的 put 中的参数无效：预期的 Blob 或文件。”

从错误消息中我认为文件的格式不正确。如何修复此错误并上传文件？

【参考方案1】：

put 方法的第一个参数是非空 Blob、非空 Uint8Array 或非空 ArrayBuffer。 https://firebase.google.com/docs/reference/js/firebase.storage.Reference#put

考虑切换到 putString 方法，这样您就可以将任何 String 放入您想要的任何格式。 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);
    );

【讨论】：

如何在 html 标签中调用这个