Javascript Firebase用户上传和配置文件图片

你好，需要帮助吗

我目前有一些JavaScript代码，允许登录用户将图像上载到Firebase存储。我希望他们上传的图片是他们的个人资料图片，但是我似乎无法将上传的图片链接回特定的用户

它可以工作，我可以在控制台中看到上传的图像，但无法识别用户上传的图像

//Upload Profile Picture 
//Altered code from: Firebase Youtube Channel. 

      //Get Elements
      var uploader = document.getElementById('uploader');
      var fileButton = document.getElementById('fileButton');

      //Listen for file 
      fileButton.addEventListener('change', function(e){

         //Get File
         var file = e.target.files[0];


         //Create a Storage Ref
         var storageRef = firebase.storage().ref('profilePictures/' + file.name);

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

         var user = firebase.auth().currentUser;        

         //Update Progress Bar 
         task.on('state_changed', 

         function progress(snapshot){
            var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
            uploader.value = percentage;

            //if percentage = 100
            //$(".overlay").hide();         
         },

         function error(err){

         },

         function complete(){

         }

       );           
    });


//Display Profile Picture   

function showUserDetails(){

   var user = firebase.auth().currentUser;
   var name, photoUrl;

   if (user != null) {
      name = user.displayName;
      photoUrl = user.photoURL;

      document.getElementById('dp').innerHTML=photoURL;
      document.getElementById('username').innerHTML=name;  
}}

我在Firebase文档中看到了下面的代码，但我不知道如何更新照片URL图像或显示它

var user = firebase.auth().currentUser;
var name, email, photoUrl, uid;

if (user != null) {
   name = user.displayName;
   email = user.email;
   photoUrl = user.photoURL;
   uid = user.uid; // The user's ID, unique to the Firebase project. Do NOT use
    // this value to authenticate with your backend server, if
    // you have one. Use User.getToken() instead.
}

---

非常感谢您的帮助或建议。

您需要按用户名存储文件：

// Get current username
var user = firebase.auth().currentUser;

// Create a Storage Ref w/ username
var storageRef = firebase.storage().ref(user + '/profilePicture/' + file.name);

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

因此，如果用户是

user:12345

，文件名是

profile.jpg

，那么文件将保存为

user:12345/profilePicture/profile.jpg

。您可以使用以下方法对此进行保护：

service firebase.storage {
  match /b/<your-firebase-storage-bucket>/o {
    match /{userId}/profilePicture/{fileName} {
      // Anyone can read
      allow read;
      // Only the user can upload their own profile picture
      // Profile picture must be of content-type "image/*"
      allow write: if request.auth.uid == userId
                   && request.resource.contentType.matches('image/.+');
    }
  }
}

service firebase.storage{
匹配/b//o{
匹配/{userId}/profilePicture/{fileName}{
//任何人都能阅读
允许读取；
//只有用户可以上传自己的个人资料图片
//配置文件图片的内容类型必须为“image/*”
允许写入：if request.auth.uid==userId
&&request.resource.contentType.matches（'image/+'）；
}
}
}

所以您在浏览器中运行了代码？我认为您需要使用firebase的db在db中记录以下图像url。谢谢，太好了！只是试图实现你提供的安全代码，我得到一个错误。第九行写着意想不到的“/+“。这就是我不用先测试就编写正则表达式得到的结果——不需要\因为/不需要转义。更新了代码并测试了部署。您好，感谢您提供此解决方案，在上传程序的同一页面中显示照片的代码是什么，在另一页面（如配置文件页面）中显示照片的控制器代码是什么？（注册完成后，我在注册时使用初始上传）谢谢@这是一个完全不同的问题。我建议您查看一下我们的web代码库，了解Firebase的窍门：