javascript - 上传到 meteor 中的 Amazon s3 未定义属性

Question

我一直在关注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 = {};

server/modules/_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;

服务器/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;
    }
  }
});

Answer 1

@anders-kitson 如果仔细阅读错误消息，您本可以节省很多时间。它会告诉您问题出在哪里:

post_submit.js:36 未捕获类型错误:无法读取未定义的属性“uploadToAmazonS3” 在 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 未定义。这就是你的问题的原因。