2017-08-19 17 views
5

Tôi đã theo dõi this hướng dẫn tải hình ảnh lên amazon s3 và tôi đã gặp lỗi sau khi chọn tệp hình ảnh từ bộ chọn tệp.Tải lên Amazon s3 tài sản không xác định trong thiên thạch

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

Đây là mã của tôi

tôi dường như không thể tìm ra những gì đang gây ra lỗi này, cho tôi biết nếu bạn cần thêm mã của tôi, nhưng tôi nghĩ rằng đây bao gồm hầu hết nó.

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/bài viết/post_submit.js

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

cả/modules/_modules.js

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

client/modules/_modules.js

Modules.client = {}; 

máy chủ/modules/_modules.js

Modules.server = {}; 

client/modules/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; 

máy chủ/cáp treo hot.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/bộ sưu tập/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; } 
}); 

cả/phương pháp/chèn/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; 
    } 
    } 
}); 
+0

Bạn nhập các tệp mô-đun này ở đâu? – Styx

+0

Tôi không chắc chắn ý của bạn là gì khi nhập các tệp mô-đun này? –

+0

Ý tôi là, bạn có thể hiển thị các tệp nơi bạn nhập 'lib '/ modules/...' etc? – Styx

Trả lời

0

@ anders-Kitson Bạn có thể đã tiết kiệm cho mình một bó thời gian bằng cách đọc kỹ thông báo lỗi. Nó sẽ cho bạn biết nơi mà vấn đề là:

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

Dòng 36 post_submit.js

Mặc dù tập tin mà bạn thấy như post_submit.js chỉ dài 5 dòng. Nếu đó là tập tin đúng, dòng vi phạm có lẽ là đây:

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

Nó cố gắng để cho bạn biết rằng Modules.client là undefined. Đó là nguyên nhân của vấn đề của bạn.

+0

Um, tôi đã đọc lỗi và tôi biết đó là do dòng mã đó, nhưng tôi không biết tại sao dòng mã đó không hoạt động, đó là toàn bộ lý do tôi đăng tất cả các mã khác của mình. –

0

Bạn biết đấy, tôi vừa nhân bản git repo này và nó làm việc cho tôi:

> Modules.client 
{uploadToAmazonS3: ƒ} 

Tôi thậm chí còn đổi tên thành hiện client/modules/upload-to-amazon.js-client/modules/upload_to_amazon_s3.js là chính xác giống như trong ví dụ mã của bạn.

Có thể có một số vấn đề khiến tệp của bạn tải? Có lẽ tập tin ACL không có sự cho phép read?

Các vấn đề liên quan