将文件上传到 Cloudinary Meteor答案

【问题标题】：Upload file to Cloudinary Meteor将文件上传到 Cloudinary Meteor
【发布时间】：2015-11-06 13:51:21
【问题描述】：

我正在使用以下 html 来允许用户上传图片：

<input class="upload" type="file" id="upload">

我有以下方法上传到 Cloudinary：

      cloud : function (source) {
      cloudinary.uploader.upload(source, function(result) { console.log(result) }, 
      { public_id: "test" });

  },

以及以下检测输入并调用方法：

'change #upload': function(event, template) {
          var imgVal = document.getElementById("upload");
          Meteor.call("cloud",imgVal);
      },

我收到此错误：

Exception while invoking method 'cloud' TypeError: Object #<Object> has no method 'match'
I20150813-10:10:38.007(-4)?     at C:\Users\Raj\art\.meteor\local\isopacks\npm-container\npm\node_modules\cloudinary\lib\uploader.js:61:34
I20150813-10:10:38.007(-4)?     at call_api (C:\Users\Raj\art\.meteor\local\isopacks\npm-container\npm\node_modules\cloudinary\lib\uploader.js:368:22)
I20150813-10:10:38.008(-4)?     at Object.exports.upload (C:\Users\Raj\art\.meteor\local\isopacks\npm-container\npm\node_modules\cloudinary\lib\uploader.js:58:12)
I20150813-10:10:38.008(-4)?     at [object Object].Meteor.methods.cloud (app\art.js:132:28)
I20150813-10:10:38.008(-4)?     at maybeAuditArgumentChecks (packages/ddp/livedata_server.js:1617:1)
I20150813-10:10:38.008(-4)?     at packages/ddp/livedata_server.js:648:1
I20150813-10:10:38.008(-4)?     at [object Object]._.extend.withValue (packages/meteor/dynamics_nodejs.js:56:1)
I20150813-10:10:38.008(-4)?     at packages/ddp/livedata_server.js:647:1
I20150813-10:10:38.009(-4)?     at [object Object]._.extend.withValue (packages/meteor/dynamics_nodejs.js:56:1)
I20150813-10:10:38.009(-4)?     at [object Object]._.extend.protocol_handlers.method (packages/ddp/livedata_server.js:646:1)
=> Meteor server restarted

我能做些什么来解决这个问题？

【问题讨论】：

我有以下 packages.json 文件：{ "cloudinary": "1.2.2" }

标签： javascript meteor cloudinary

【解决方案1】：

图片上传不支持 Meteor.call 功能。

试试：

'yourcollection'.allow({ <-- without the ''.
  insert: function() {return true},
  update: function() {return true},
});

把它放在你的 lib/yourcollection.js 中

【讨论】：

执行此操作后，我收到此错误：W20150813-10:32:19.667(-4)? (STDERR) Error: A method named '/projects/insert' is already defined
顺便说一句，您安装了哪些软件包？你能把它列在上面吗？
进入你的meteor app文件夹然后进入.meteor然后包然后复制粘贴到这里
我使用meteor-hacks npm 安装cloudinary，也许这就是我收到error: unknown package in top-level dependencies: cloudinary的原因
mhh 这很棘手，也许你应该安装普通的流星平台

【解决方案2】：

cloudinary.uploader.upload 期望第一个参数 file 是一个字符串。您正在发送HTMLInputElement。

您可以使用files 属性和FileReader 将所选文件从输入元素中提取为base64 编码字符串：

'change #upload': function(event, template) {
    var imgVal = document.getElementById("upload");
    var files = imgVal.files; // FileList object

    // Loop through the FileList and upload each image file.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          Meteor.call("cloud",e.target.result);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  },

（来源改编自http://www.html5rocks.com/en/tutorials/file/dndfiles/。）

请注意，cloudinary_npm 是为服务器端操作而设计的 - 但是我相信上面的代码会起作用。

【讨论】：