图片上传在 Meteor 中不起作用

Question

在我的流星应用程序中，我正在上传图像并将它们存储在 Dropbox 中。当我在 localhost 中运行应用程序时，它工作正常。但是，一旦我在将应用程序部署到meteor.com 后运行该应用程序，上传就无法正常工作。

这是我在 server.js 中的代码

var createThumb = function(fileObj, readStream, writeStream) {
// Transform the image into a 10x10px thumbnail
gm(readStream, fileObj.name()).resize('10', '10').stream().pipe(writeStream);
};

var dropboxStore = new FS.Store.Dropbox("files", {
key: "",
secret: "",
token: "", // Don’t share your access token with anyone.
transformWrite: createThumb, //optional
})

Images = new FS.Collection("files", {
   stores: [dropboxStore]
});

Images.allow({
'insert': function () {
    // add custom authentication code here
    return true;
 }
});

这里是meteor.com http://image_upload.meteor.com/的链接。

我已尝试将 Dropbox 更改为 s3，但仍然无法正常工作。可能是因为它托管在meteor.com 上吗？

期待解决方案。

Answer 1

很可能是因为您尝试使用 GraphicsMagick 来调整 transformWrite 选项中的图像大小，但 meteor.com 托管服务器没有安装 GraphicsMagick 或 ImageMagick。

https://github.com/CollectionFS/Meteor-CollectionFS/issues/299

您可以使用meteor logs 命令查看托管meteor.com 应用程序的日志，以确保问题所在。

编辑

以下是 jQuery 裁剪器实用程序的一些示例代码：

模板 HTML：

<input type="file" style="visibility:hidden;width:1px" accept="image/gif, image/jpeg, image/png" class="profilePhotoFile">
<input type="button" id="btnEditPhoto" value="Edit Photo" class="btn btn-primary" style="width:160px"/>

<div class="modal fade" id="cropper-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div id="cropper">
          <img src="" alt="Picture">
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" id="btnSavePhoto">Save</button>
        <button class="btn btn-default" id="btnCancel">Cancel</button>
      </div>
    </div>
  </div>
</div>

模板 JS：

Template.myTemplate.events({
    'click #btnEditPhoto': function(event, template) {
        $('.profilePhotoFile').click();
    },
    'change .profilePhotoFile': function(event, template) {
        if (!event.target.files || event.target.files.length === 0) {
            return;
        } else {
            var $inputImage = $(event.target);
            var URL = window.URL || window.webkitURL;
            var file = event.target.files[0];
            var blobURL = URL.createObjectURL(file);
            $image = $('#cropper > img');

            $('#cropper-modal').modal();

            $('#cropper-modal').on('shown.bs.modal', function() {
                $image.cropper({
                    aspectRatio: 1.0,
                    autoCropArea: 1.0
                }).cropper('replace', blobURL);

                $inputImage.val('');
            }).on('hidden.bs.modal', function() {
                $image.cropper('destroy');
                URL.revokeObjectURL(blobURL); // Revoke url
            });
        }
    },
    'click #btnSavePhoto': function(event, template) {
        $image = $('#cropper > img');

        //Change the width and height to your desired size
        var base64EncodedImage = $image.cropper('getCroppedCanvas', {width: 10, height: 10}).toDataURL('image/jpeg');

        $('#cropper-modal').modal('hide');

        var newImage = new FS.File(base64EncodedImage);

        Images.insert(newImage, function(err, fileObj) {
            if (err) {
                console.log(err);
            } else {
                //do something after insert
            }
        });
    },
    'click #btnCancel': function(event, template) {
        $('#cropper-modal').modal('hide');
    }
});