如何通过 lambda 和 api 网关将我的 blob 上传到我的 s3 存储桶？

Posted 2023-03-05

【中文标题】如何通过 lambda 和 api 网关将我的 blob 上传到我的 s3 存储桶？

【英文标题】：How do I upload my blob to my s3 bucket via lamda and api gateway?

【发布时间】：2020-04-05 15:54:48

【问题描述】：

我正在尝试上传通过网络表单获得的一些数据：

   <form class="container" enctype="multipart/form-data" method="POST" name="formS3ObjManager" id="formS3ObjManagerId">

    <div class="form-row">
            <div class="col">
                <input type="text" class="form-control" id="age" placeholder="Confirm your age" required>
            </div>
        </div>
        <div class="form-row">
            <div class="col">
                <input type="text" class="form-control" id="firstname" placeholder="Confirm your first name" required>
            </div>
        </div>

        <input type="file" name="file" id="file1" required />
        <input type="file" name="file2" id="file2" required />
    </form>

我这样做的方式是通过 AWS lamda 和 apigateway。

我可以轻松上传我的输入文件，接下来我需要在这个 Web 应用程序中构建的功能是将表单数据作为文本文件上传到 s3 存储桶中与随附文件一起放置。

在谷歌搜索后，我想出了以下方法来完成此操作：

        function uploadFile(s3Data, url) 

        var formData = new FormData();
    /*
    All the PreSigned URL fields to FormData as required by Amazon S3
    */
    for (key in s3Data.fields) 
        formData.append(key, s3Data.fields[key]);
    ;
    /*
    Attach the file to be uploaded to FormData
    */
    formData.append('file', $('input[type="file"]')[0].files[0]);
    /**/
    const firstname = document.getElementById('firstname').value;
    const age = document.getElementById('age').value;
    lines = 'firstname:'+firstname +'      '+'age:'+ age

    let blob2 = new Blob([lines],  type: "text/plain"  );
            $.ajax(
        url: url,
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() 
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(evt) 
                if (evt.lengthComputable) 
                    var percentComplete = evt.loaded / evt.total;
                    console.log(percentComplete);
                    $('#status').html('<b> Uploading -> ' + (Math.round(percentComplete * 100)) + '% - do not close the browser window</b>');
                
            , false);
            return xhr;
        ,
        success: function(data, textStatus, request) 
            if (request.status === 200 || request.status === 204) 
                $("#urlTextId").html("Status: Uploaded Successfully.<br /> Object Key: " + s3Data.fields.key);
                $("#SignedUrlId").html("");
                console.log("Status:" + request.status);
                $("#div-obj-holderId").show();
             else 
                $("#urlTextId").html("Br!! Unable to upload Object. Try again!! <br />Status:" + request.status);
            
        ,
    );

我不知道如何将 blob（此处命名为 blob2）转换为文本文件，即 example.txt，其中包含表单数据（年龄和名字）。我也不知道如何通过 ajax 发布请求上传。

我可以得到一些建议/解决方案吗？

【问题讨论】：

这里：var file = new File([blob], "filename");参考：***.com/questions/31831781/…

谢谢，但这不起作用。没有发生错误，但 s3 中似乎没有文本文件

你使用的 s3 url 是什么

是执行成功的块。在成功块中添加console.log()

您的 api 网关和 lambda 代码在哪里。您是否使用 api 网关和 lambda 进行上传。还是您尝试从 html 直接上传到 s3

【参考方案1】：

您可以将 blob 添加到 FormData，如下所示。

let blob2 = new Blob([lines],  type: "text/plain"  );
formData.append("blob",blob2, 'example.txt');

如果您使用 s3 预签名 url，则无法在同一请求中上传两个文件。

【讨论】：

他为什么要那样做？那有什么作用？它如何回答这个问题？ How To Answer