在流星中上传到 Amazon s3 未定义的属性答案

【问题标题】：Uploading to Amazon s3 undefined property in meteor在流星中上传到 Amazon s3 未定义的属性
【发布时间】：2018-01-27 17:34:41
【问题描述】：

我一直在关注this 将图像上传到 amazon s3 的教程，在从文件选择器中选择图像文件后遇到了错误。

post_submit.js:36 Uncaught TypeError: Cannot read property 'uploadToAmazonS3' of undefined
at Object.change input[type="file"] (post_submit.js:36)

这是我的代码

我似乎无法弄清楚导致此错误的原因，如果您需要更多我的代码，请告诉我，但我认为这涵盖了大部分内容。

client/templates/posts/post_submit.html

<template name="postSubmit">
    <div class="upload-area">
      <form id="upload">
        <p class="alert alert-success text-center">
          <span>Click or Drag a File Here to Upload</span>
          <input type="file">
        </p>
      </form>
      {{> files}}
    </div>
    <input type="submit" value="Submit" class="btn btn-primary"/>
  </form>
</template>

client/template/posts/post_submit.js

Template.postSubmit.events({
  'change input[type="file"]' ( event, template ) {
    Modules.client.uploadToAmazonS3( { event: event, template: template } );
  }
});

both/modules/_modules.js

Modules      = {};
Modules.both = {};

client/modules/_modules.js

Modules.client = {};

服务器/模块/_modules.js

Modules.server = {};

客户端/模块/upload_to_amazon_s3.js

let template;

let _getFileFromInput = ( event ) => event.target.files[0];

let _setPlaceholderText = ( string = "Click or Drag a File Here to Upload" ) => {
  template.find( ".alert span" ).innerText = string;
};

let _addUrlToDatabase = ( url ) => {
  Meteor.call( "storeUrlInDatabase", url, ( error ) => {
    if ( error ) {
      Bert.alert( error.reason, "warning" );
      _setPlaceholderText();
    } else {
      Bert.alert( "File uploaded to Amazon S3!", "success" );
      _setPlaceholderText();
    }
  });
};

let _uploadFileToAmazon = ( file ) => {
  const uploader = new Slingshot.Upload( "uploadToAmazonS3" );

  uploader.send( file, ( error, url ) => {
    if ( error ) {
      Bert.alert( error.message, "warning" );
      _setPlaceholderText();
    } else {
      _addUrlToDatabase( url );
    }
  });
};

let upload = ( options ) => {
  template = options.template;
  let file = _getFileFromInput( options.event );

  _setPlaceholderText( `Uploading ${file.name}...` );
  _uploadFileToAmazon( file );
};

Modules.client.uploadToAmazonS3 = upload;

server/slingshot.js

Slingshot.fileRestrictions( "uploadToAmazonS3", {
  allowedFileTypes: [ "image/png", "image/jpeg", "image/gif" ],
  maxSize: 1 * 1024 * 1024
});

Slingshot.createDirective( "uploadToAmazonS3", Slingshot.S3Storage, {
  bucket: "mrskitson-images",
  acl: "public-read",
  authorize: function () {
    let userFileCount = Files.find( { "userId": this.userId } ).count();
    return userFileCount < 3 ? true : false;
  },
  key: function ( file ) {
    var user = Meteor.users.findOne( this.userId );
    return user.emails[0].address + "/" + file.name;
  }
});

lib/collections/files.js

Files = new Meteor.Collection( 'files' );

Files.allow({
  insert: function() { return false; },
  update: function() { return false; },
  remove: function() { return false; }
});

Files.deny({
  insert: function(){ return true; },
  update: function(){ return true; },
  remove: function(){ return true; }
});

both/methods/insert/files.js

Meteor.methods({
  storeUrlInDatabase: function( url ) {
    check( url, String );
    Modules.both.checkUrlValidity( url );

    try {
      Files.insert({
        url: url,
        userId: Meteor.userId(),
        added: new Date()
      });
    } catch( exception ) {
      return exception;
    }
  }
});

【问题讨论】：

你在哪里导入这些模块文件？
我不知道你说的导入这些模块文件是什么意思？
我的意思是，你能把你做import 'lib/modules/...等的文件显示出来吗？
我不认为我有任何导入代码，这是本教程中的一个工作 github 存储库，我查看了它并没有看到任何导入代码，可能是我瞎了。 github.com/themeteorchef/uploading-files-to-amazon-s3/tree/…

标签： javascript meteor amazon-s3 image-uploading

【解决方案1】：

@anders-kitson 您可以通过仔细阅读错误消息来节省大量时间。它告诉你问题出在哪里：

post_submit.js:36 Uncaught TypeError: Cannot read property 'uploadToAmazonS3' of undefined at Object.change input[type="file"] (post_submit.js:36)

post_submit.js 的第 36 行

虽然您显示为 post_submit.js 的文件只有 5 行长。如果那是正确的文件，那么有问题的行可能是这样的：

Modules.client.uploadToAmazonS3( { event: event, template: template });

它试图告诉你 Modules.client 是未定义的。这就是你的问题的原因。

【讨论】：

嗯，我确实阅读了错误，我知道它是由那行代码引起的，但我不知道为什么那行代码不起作用，这就是我发布所有内容的全部原因我的其他代码。

【解决方案2】：

你知道，我刚刚克隆了这个 git repo，它对我有用：

> Modules.client
{uploadToAmazonS3: ƒ}

我什至将现有的 client/modules/upload-to-amazon.js 重命名为 client/modules/upload_to_amazon_s3.js 以与您的示例代码完全相同。

也许，有一些问题会阻止您的文件加载？可能文件ACL没有read权限？

【讨论】：