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

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)

这是我的代码

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

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>

客户端/模板/帖子/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;

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

库/集合/文件.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; }
});

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

Answer 2

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

> Modules.client
{uploadToAmazonS3: ƒ}

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

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