在流星上传到Amazon s3 undefined属性

Question

我一直在按照本教程将图像上传到amazon s3,并且在从文件选择器中选择图像文件后遇到了错误.

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

这是我的代码

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

客户端/模板/职位/ 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>

客户端/模板/职位/ post_submit.js

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

两者/模块/ _modules.js

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

客户机/模块/ _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;

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

两者/方法/插入/ 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 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 未定义。这就是你的问题的原因。