我使用gridfs
将图片存储在mongoDB
中。我在后台更新图像时想要在完成上传后在屏幕上更新图像时出现问题。当我将图像文档存储在我的mongoDB中然后更新屏幕时,我会触发一个事件。看起来文档是在上传图像时创建的,因为如果我这样做,我的图像会被503 error
打破(服务不可用)。当我刷新页面时,图像出现在屏幕上。
我认为问题是我在上传时尝试获取图片。我想做一个$.get(imagesURL)
并抓住503错误,但我不知道该怎么做。如果我能抓住错误,我可以做一个循环并等到它上传。
也许你们也有更好的解决方案或知道如何使用jquery捕获503错误?
我使用普通file input field
作为图片
(meteorjs
中的模板事件的一部分)
'change #avatarForm': function (event) {
FS.Utility.eachFile(event, function (file) {
Images.insert(file, function (err, fileObj) {
if (err) {
// handle error
} else {
// handle success depending what you need to do
var userId = Meteor.userId();
var imagesURL = {
"profile.image": "/cfs/files/images/" + fileObj._id
};
Meteor.users.update(userId, {$set: imagesURL});
function checkAvatar() {
$.get(imagesURL)
.complete(function () {
Session.set("registerAvatar", "/cfs/files/images/" + fileObj._id);
}).onerror(function () {
console.log("but still uploading");
checkAvatar();
});
console.log("image saved!");
}
checkAvatar();
}
});
});
},
我的代码应该只在图像完成时触发屏幕上的新图像(url设置为SessionVar),但它不起作用。
这是我确切的错误
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
答案 0 :(得分:0)
这样的事情应该有效。模式是使用反应数据源设置模板助手 - 在本例中为Meteor.user()
。当Meteor.user()
更改时,模板帮助程序将呈现新数据,而无需手动获取任何数据:
<template name="test">
<div>Profile Image:</div>
{{#if profileImage}}
<div><img src="{{profileImage}}"></div>
{{/if}}
</template>
Template.test.events({
'change #avatarForm': function(event) {
FS.Utility.eachFile(event, function(file) {
Images.insert(file, function(err, fileObj) {
if (err) {
// handle error
} else {
// handle success depending what you need to do
var userId = Meteor.userId();
var profileImage = {
"profile.image.url": fileObj.url(),
"profile.image.id": fileObj._id
};
Meteor.users.update(userId, {
$set: profileImage
});
}
});
});
},
});
Template.test.helpers({
profileImage: function () {
return Meteor.user().profile.image.url;
}
});