Как загружать изображения из FileReader в Amazon s3 с помощью метеора

Я пытаюсь создать загрузчик изображений с метеором на Amazon S3. Благодаря Hubert OG я нашел AWS-SDK, который упрощает работу.

Моя проблема в том, что загруженные данные кажутся поврежденными. Когда я загружаю файл, он говорит, что файл может быть поврежден. Вероятно, это так.

Вставка данных в изображение src работает, и предварительный просмотр изображения отображается, как и предполагалось, поэтому исходный файл и, вероятно, данные верны.

Я загружаю файл с помощью FileReader, а затем передаю данные результата методу AWS-SDK putObject.

        var file=template.find('[type=file]').files[0];
        var key="uploads/"+file.name;

        var reader=new FileReader();
        reader.onload=function(event){
            var data=event.target.result;
            template.find('img').src=data;
            Meteor.call("upload_to_s3",file,"uploads",reader.result);
        };

        reader.readAsDataURL(file);

и это метод на сервере:

    "upload_to_s3":function(file,folder,data){
        s3 = new AWS.S3({endpoint:ep});
        s3.putObject(
            {
                Bucket: "myportfoliositebucket",
                ACL:'public-read',
                Key: folder+"/"+file.name,
                ContentType: file.type,
                Body:data
            },
            function(err, data) {
                if(err){
                    console.log('upload error:',err);
                }else{
                    console.log('upload was succesfull',data);
                }
            }
        );
    }

amazon-s3 meteor filereader
person zalavari    schedule 25.10.2013    source источник
comment
Вы смогли передать файловый объект методу метеора? Я получаю неопределенность.   -  person Ankita    schedule 15.10.2015

Ответы (2)


arrow_upward
4
arrow_downward

Я обернул модуль npm в виде интеллектуального пакета, который можно найти здесь: https://atmosphere.meteor.com/package/s3policies

С его помощью вы можете создать метод Meteor, который возвращает политику записи, и с помощью этой политики вы можете загружать данные на S3 с помощью вызова ajax.

Пример:

Meteor.call('s3Upload', name, function (error, policy) {
    if(error)
        onFinished({error: error});
    var formData = new FormData();
    formData.append("AWSAccessKeyId", policy.s3Key);
    formData.append("policy", policy.s3PolicyBase64);
    formData.append("signature", policy.s3Signature);

    formData.append("key", policy.key);
    formData.append("Content-Type", policy.mimeType);
    formData.append("acl", "private");
    formData.append("file", file);

    $.ajax({
        url: 'https://s3.amazonaws.com/' + policy.bucket + '/',
        type: 'POST',
        xhr: function() {  // custom xhr
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // check if upload property exists
                myXhr.upload.addEventListener('progress',
                    function (e){
                        if(e.lengthComputable)
                            onProgressUpdate(e.loaded / e.total * 100);

                }, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        success: function () {
            // file finished uploading
        },
        error: function () { onFinished({error: arguments[1]}); },
        processData: false,
        contentType: false,
        // Form data
        data: formData,
        cache: false,
        xhrFields: { withCredentials: true },
        dataType: 'xml'
    });
});

РЕДАКТИРОВАТЬ:

Переменная "файл" в строке: formData.append("file", file); взята из строки, подобной этой: var file = document.getElementById('fileUpload').files[0];

Код на стороне сервера выглядит так:

Meteor.methods({
    s3Upload: function (name) {
        var myS3 = new s3Policies('my key', 'my secret key');

        var location = Meteor.userId() + '/' + moment().format('MMM DD YYYY').replace(/\s+/g, '_') + '/' + name;
        if(Meteor.userId()) {
            var bucket = 'my bucket';
            var policy = myS3.writePolicy(location, bucket, 10, 4096);
            policy.key = location;
            policy.bucket = bucket;
            policy.mimeType = mime.lookup(name);
            return policy;
        }
    }
});
person Dave    schedule 25.10.2013

arrow_upward
2
arrow_downward

Тело должно быть преобразовано в буфер — см. документацию.

Таким образом, вместо Body: data у вас должно быть Body: new Buffer(data, 'binary').

person Hubert OG    schedule 25.10.2013
comment
Это на самом деле был ответ! - person Roshdy; 03.11.2019