Javascript 在Firebase注册期间,如何上传和分配配置文件图片给用户?
我通过Firebase本身的Youtube教程找到了一个关于如何上传图片的不错的脚本,但是,该代码适用于已登录的用户,我想在注册页面上这样做 我在爱奥尼亚框架下,以下是本教程的代码:Javascript 在Firebase注册期间,如何上传和分配配置文件图片给用户?,javascript,firebase,ionic-framework,firebase-authentication,firebase-storage,Javascript,Firebase,Ionic Framework,Firebase Authentication,Firebase Storage,我通过Firebase本身的Youtube教程找到了一个关于如何上传图片的不错的脚本,但是,该代码适用于已登录的用户,我想在注册页面上这样做 我在爱奥尼亚框架下,以下是本教程的代码: //Upload Profile Picture //Altered code from: Firebase Youtube Channel. //Get Elements var uploader = document.getElementById('uploader');
//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;
}}
这是我的注册控制器的代码:
.controller('signupController', ['$scope', '$state', '$document', '$firebaseArray', 'CONFIG', function($scope, $state, $document, $firebaseArray, CONFIG) {
$scope.doSignup = function(userSignup) {
//console.log(userSignup);
if($document[0].getElementById("cuser_name").value != "" && $document[0].getElementById("cuser_pass").value != ""){
firebase.auth().createUserWithEmailAndPassword(userSignup.cusername, userSignup.cpassword).then(function() {
// Sign-In successful.
//console.log("Signup successful");
var user = firebase.auth().currentUser;
var database = firebase.database();
//Upload Profile Picture
//Altered code from: Firebase Youtube Channel.
//Get Elements
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
user.sendEmailVerification().then(function(result) { console.log(result) },function(error){ console.log(error)});
firebase.database().ref().child('/accounts/' + user.uid).set({
name: userSignup.displayname,
email: userSignup.cusername,
password: userSignup.cpassword,
description: "No description for this user",
facebook: "",
twitter: "",
}).then(function() {
// Update successful.
$state.go("login");
}, function(error) {
// An error happened.
console.log(error);
});
}, function(error) {
// An error happened.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode);
if (errorCode === 'auth/weak-password') {
alert('Password is weak, choose a strong password.');
return false;
}else if (errorCode === 'auth/email-already-in-use') {
alert('Email you entered is already in use.');
return false;
}
});
}else{
alert('Please enter email and password');
return false;
}//end check client username password
};// end $scope.doSignup()
}])
如您所见,我想在注册中集成第一个教程的代码,并仍然将其与用户的UID一起归属到用户的存储中,但我找不到这样做的方法。。。有什么想法吗?//下面的代码还没有经过测试,但它应该可以工作,或者至少可以提供 //你知道如何处理你的问题吗 .controller('signupController'、['$scope'、'$state'、'$document'、'$firebaseArray','CONFIG',函数($scope、$state、$document、$firebaseArray,CONFIG){ $scope.doSignup=函数(userSignup){ //console.log(userSignup) };//end$scope.doSignup()
}])通过CreateUserWithEmail和Password创建用户后,请用户上传其个人资料图片。然后在上传完成后,调用用户的updateProfile来更新photoURL。
if($document[0].getElementById("cuser_name").value != "" && $document[0].getElementById("cuser_pass").value != "" && $document[0].getElementById("fileButton").value != ""){
firebase.auth().createUserWithEmailAndPassword(userSignup.cusername, userSignup.cpassword).then(function() {
// Sign-In successful.
//console.log("Signup successful");
var user = firebase.auth().currentUser;
var database = firebase.database();
//Upload Profile Picture
//Altered code from: Firebase Youtube Channel.
//Get Elements
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
user.sendEmailVerification().then(function(result) { console.log(result) },function(error){ console.log(error)});
//Get File
var file = fileButton.value; // or however way the file path can be obtained
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(){
//Obtain the URL for the uploaded photo
var photoURL = task.snapshot.downloadURL;
firebase.database().ref().child('/accounts/' + user.uid).set({
name: userSignup.displayname,
email: userSignup.cusername,
photoURL: photoURL //add a photoURL attribute and assign it to the URL of the newly uploaded file
password: userSignup.cpassword,
description: "No description for this user",
facebook: "",
twitter: "",
}).then(function() {
// Update successful.
$state.go("login");
}, function(error) {
// An error happened.
console.log(error);
});
}
);
});
}, function(error) {
// An error happened.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode);
if (errorCode === 'auth/weak-password') {
alert('Password is weak, choose a strong password.');
return false;
}else if (errorCode === 'auth/email-already-in-use') {
alert('Email you entered is already in use.');
return false;
}
});
}else{
alert('Please enter email and password');
return false;
}//end check client username password