如何使用流星将图像从FileReader上传到Amazon S3

我正试图用流星向亚马逊S3构建一个图像上传器。 感谢Hubert OG，Ive发现了使事情变得简单的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);
                }
            }
        );
    }

---

我将一个npm模块作为一个智能软件包包装在这里：https://atmosphere.meteor.com/package/s3policies

有了它，您可以制作一个返回写入策略的流星方法，并且可以使用ajax调用将该策略上传到S3。

例：

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;
        }
    }
});

---

正文应转换为缓冲区 - 请参阅文档。

因此，而不是Body: data你应该有Body: new Buffer(data, 'binary') 。

链接地址: http://www.djcxy.com/p/16925.html

上一篇: How to Upload images from FileReader to Amazon s3, using meteor

下一篇: Naive way to find largest block in a rectangle of 1's and 0's