如何在 AWS S3 上上传多个文件并使用 Angular 将 url 存储到 Firebase？

Question

我使用 AWS S3 作为托管（文件）并使用 firebase 作为数据库，它可以正常上传单个文件吗？
有什么方法可以通过 Angular 在 S3 上上传多张图片吗？

Answer 1

您可以通过 AWS S3 Cognito 执行此操作 link 此处尝试此操作：

http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-examples.html#Amazon_S3

也试试这个代码

只需更改区域、IdentityPoolId 和您的存储桶名称

<!DOCTYPE html>
<html>

<head>
    <title>AWS S3 File Upload</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
</head>

<body>
    <input type="file" id="file-chooser" />
    <button id="upload-button">Upload to S3</button>
    <div id="results"></div>
    <script type="text/javascript">
    AWS.config.region = 'your-region'; // 1. Enter your region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'your-IdentityPoolId' // 2. Enter your identity pool
    });
    AWS.config.credentials.get(function(err) {
        if (err) alert(err);
        console.log(AWS.config.credentials);
    });
    var bucketName = 'your-bucket'; // Enter your bucket name
    var bucket = new AWS.S3({
        params: {
            Bucket: bucketName
        }
    });
    var fileChooser = document.getElementById('file-chooser');
    var button = document.getElementById('upload-button');
    var results = document.getElementById('results');
    button.addEventListener('click', function() {
        var file = fileChooser.files[0];
        if (file) {
            results.innerHTML = '';
            var objKey = 'testing/' + file.name;
            var params = {
                Key: objKey,
                ContentType: file.type,
                Body: file,
                ACL: 'public-read'
            };
            bucket.putObject(params, function(err, data) {
                if (err) {
                    results.innerHTML = 'ERROR: ' + err;
                } else {
                    listObjs(); // this function will list all the files which has been uploaded
                    //here you can also add your code to update your database(MySQL, firebase whatever you are using)
                }
            });
        } else {
            results.innerHTML = 'Nothing to upload.';
        }
    }, false);
    function listObjs() {
        var prefix = 'testing';
        bucket.listObjects({
            Prefix: prefix
        }, function(err, data) {
            if (err) {
                results.innerHTML = 'ERROR: ' + err;
            } else {
                var objKeys = "";
                data.Contents.forEach(function(obj) {
                    objKeys += obj.Key + "<br>";
                });
                results.innerHTML = objKeys;
            }
        });
    }
    </script>
</body>

</html>

希望对其他人有所帮助:)

Answer 2

Firebase 工程师：

我建议使用我们的最新产品 Firebase Storage, which is a Firebase wrapper around Google Cloud Storage 来直接从移动客户端提供安全、可恢复的上传和下载——它基本上用 Firebase 数据库集成解决方案取代了它！此后，我们还获得了慷慨的免费套餐和有竞争力的价格，以及与 S3 直接兼容的 API（通过 Google 云存储）。

如何在 AWS S3 上上传多个文件并使用 Angular 将 url 存储到 Firebase？

How to upload multiple files on AWS S3 and storing the url to Firebase using Angular?

amazon-s3

amazon-web-services

angularjs

firebase