对于像我这样的Angular / Angularfire / Firebase新手的人来说,并没有很多明确的文档,至少对于我一直在寻找的内容:
目前,我可以在Firebase后端创建和存储用户。用户可以创建帖子。现在它基于用户输入到创建帖子表单中的任何数据。这一切都很好,但我似乎找不到任何关于如何允许图像上传到该帖子的文档。
基本上:我希望用户能够使用他们的帖子上传像图像一样的文件(即带有上传图像的博客文章。)
POST控制器 'use strict';
app.controller('PostsCtrl', function ($scope, $location, Post) {
if ($location.path() === '/posts') {
$scope.posts = Post.all;
}
$scope.post = {url: 'http://'};
$scope.submitPost = function () {
Post.create($scope.post).then(function (ref) {
// $location.path('/posts/' + ref.name()); //
});
};
$scope.deletePost = function (postId) {
Post.delete(postId);
};
$scope.upVotePost = function (postId, upVoted) {
if (upVoted) {
Post.clearVote(postId, upVoted);
} else {
Post.upVote(postId);
}
};
$scope.downVotePost = function (postId, downVoted) {
if (downVoted) {
Post.clearVote(postId, !downVoted);
} else {
Post.downVote(postId);
}
};
$scope.upVoted = function (post) {
return Post.upVoted(post);
};
$scope.downVoted = function (post) {
return Post.downVoted(post);
};
});
POST SERVICE
'use strict';
app.factory('Post',
function ($firebase, FIREBASE_URL, User) {
var ref = new Firebase(FIREBASE_URL + 'posts');
var posts = $firebase(ref);
var Post = {
all: posts,
create: function (post) {
if (User.signedIn()) {
var user = User.getCurrentUser();
post.owner = user.username;
return posts.$add(post).then(function (ref) {
var postId = ref.name();
user.$child('posts').$child(postId).$set(postId);
});
}
},
find: function (postId) {
return posts.$child(postId);
},
delete: function (postId) {
if (User.signedIn()) {
var post = Post.find(postId);
post.$on('loaded', function () {
var user = User.findByUsername(post.owner);
posts.$remove(postId).then(function () {
user.$child('posts').$remove(postId);
});
});
}
},
addComment: function (postId, comment) {
if (User.signedIn()) {
var user = User.getCurrentUser();
comment.username = user.username;
comment.postId = postId;
posts.$child(postId).$child('comments').$add(comment).then(function (ref)
{
user.$child('comments').$child(ref.name()).$set({id: ref.name(),
postId: postId});
});
}
},
deleteComment: function (post, comment, commentId) {
if (User.signedIn()) {
var user = User.findByUsername(comment.username);
post.$child('comments').$remove(commentId).then(function () {
user.$child('comments').$remove(commentId);
});
}
},
upVote: function (postId) {
if (User.signedIn()) {
var user = User.getCurrentUser();
var post = posts.$child(postId);
post.$child('upvotes').$child(user.username).$set(user.username).then(function () {
user.$child('upvotes').$child(postId).$set(postId);
post.$child('downvotes').$remove(user.username);
user.$child('downvotes').$remove(postId);
post.$child('score').$transaction(function (score) {
if (!score) {
return 1;
}
return score + 1;
});
});
}
},
downVote: function (postId) {
if (User.signedIn()) {
var user = User.getCurrentUser();
var post = posts.$child(postId);
post.$child('downvotes').$child(user.username).$set(user.username).then(function () {
user.$child('downvotes').$child(postId).$set(postId);
post.$child('upvotes').$remove(user.username);
user.$child('upvotes').$remove(postId);
post.$child('score').$transaction(function (score) {
if (score === undefined || score === null) {
return -1;
}
return score - 1;
});
});
}
},
clearVote: function (postId, upVoted) {
if (User.signedIn()) {
var user = User.getCurrentUser();
var username = user.username;
var post = posts.$child(postId);
post.$child('upvotes').$remove(username);
post.$child('downvotes').$remove(username);
user.$child('upvotes').$remove(postId);
user.$child('downvotes').$remove(postId);
post.$child('score').$transaction(function (score) {
if (upVoted) {
return score - 1;
} else {
return score + 1;
}
});
}
},
upVoted: function (post) {
if (User.signedIn() && post.upvotes) {
return post.upvotes.hasOwnProperty(User.getCurrentUser().username);
}
},
downVoted: function (post) {
if (User.signedIn() && post.downvotes) {
return post.downvotes.hasOwnProperty(User.getCurrentUser().username);
}
}
};
return Post;
});
创建帖子
<form class="" role="search" ng-submit="submitPost()" enctype="multipart/form-data">
<div class="form-group">
<input type="text" class="form-control" placeholder="Word" ng-model="post.category">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" ng-model="post.title">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link" ng-model="post.url">
</div>
<div class="form-group">
<textarea id="post-content" class="form-control" rows="6" placeholder="Content" ng-model="post.content"></textarea>
</div>
<button type="submit" class="btn btn-default is-form-toggle">Submit</button>
<input type="button" value="Cancel" class="btn btn-default is-form-toggle is-close-button" />
</form>
我还需要其他什么吗?正如您所看到的,表单还没有文件输入,因为我不知道此时要使用什么。希望有人能够至少引导我朝着正确的方向前进!非常感谢。