Meteor JS:S3图像上传的延迟补偿?

时间:2014-01-15 05:47:22

标签: javascript amazon-s3 meteor

我是流星初学者,试图找出在将图像上传到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

0 个答案:

没有答案