我是流星初学者,试图找出在将图像上传到S3时如何实现延迟补偿。
我想显示图像的blob,同时图像在后台上传到Amazon S3。 S3上传完成后,img src应无缝更改为S3 URL。不幸的是,我没有成功。
我尝试过创建一个存根方法,但不是无缝交换的图像,我看到一个白色闪光,然后是斑点,然后是白色闪光再次几秒钟,然后是最终的S3图像。
这是我的代码:
Images = new Meteor.Collection('images');
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function() {
this.route('home', {
path: '/'
});
this.route('image', {
path: '/:_id',
data: function() {
return Images.findOne(this.params._id);
}
});
});
if (Meteor.isClient) {
Template.home.events({
'dragover .dropzone' : function(e) {
e.preventDefault();
$(e.currentTarget).addClass('dragover');
},
'drop .dropzone' : function(e) {
e.preventDefault();
var imageId = new Meteor.Collection.ObjectID()._str;
var file = e.originalEvent.dataTransfer.files[0];
var blob = URL.createObjectURL(file);
Router.go('image', {_id: imageId});
// Create file reader.
var reader = new FileReader();
reader.onload = function() {
var img = {
_id: imageId,
binary: this.result,
blob: blob,
fileType: file.type
};
Meteor.call('uploadImage', img, function(error, url) {
if (error) {
console.log(error);
} else {
console.log(url);
}
});
}
// Read file,
reader.readAsBinaryString(file);
}
});
Meteor.methods({
uploadImage: function(image) {
var imageId = image._id;
var blob = image.blob
Images.upsert( image._id, { $set: {image_src: blob} } );
}
});
}
if (Meteor.isServer) {
Meteor.methods({
uploadImage: function(image) {
var imageId = image._id;
var filename = "foobar2" + ".png";
AWS.config.update({
accessKeyId: 'ACCESS_KEY',
secretAccessKey: 'SECRET'
});
s3 = new AWS.S3();
var buffer = new Buffer(image.binary, 'binary');
var params = {
Bucket: "proof-dev",
ACL: 'public-read',
Key: filename,
ContentType: image.fileType,
Body: buffer
};
var insertImage = Meteor.bindEnvironment(function () {
Images.upsert( image._id, { $set: {image_src: "https://s3.amazonaws.com/foobar/" + filename} } );
}, function (e) {
console.log(e);
});
s3.putObject(params, function(err, data) {
if (err) {
console.log(err)
} else {
insertImage();
}
});
}
});
}
我正在使用铁路由器以及Meteor template-engine-preview-10.1
。