首页 > 解决方案 > 防止 Javascript 在文件上传到 S3 时添加元数据

问题描述

基本上我愿意通过浏览器直接将文件上传到 S3,即没有任何网络服务器充当这样的中间件或代理。

在此处输入图像描述

所以我使用 boto3 库生成预签名 URL,如下所示:

def put_url(self, key):
    url = self.client.generate_presigned_url(
        ClientMethod="put_object",
        Params={
            "Bucket": "visweswaran",
            "Key": key
        }
    )
    return url

这将返回一个完全没问题的预签名 URL。我正在使用 JQuery 向 S3 发出 ajax PUT 请求以上传我的文件。

                let file_data = document.getElementById("file_data").files[0];
                var form = new FormData();
                form.append("", file_data, "test.txt");
                var settings = {
                  "url": url,
                  "method": "PUT",
                  "timeout": 0,
                  "processData": false,
                  "mimeType": "multipart/form-data",
                  "contentType": "text/plain",
                  "beforeSend": function(xhr){xhr.setRequestHeader('Content-Disposition', 'attachment');},
                  "data": form
                };
                $.ajax(settings).done(function (response) {
                  location.reload();
                });

该文件通过浏览器成功上传到 S3。但是当我打开文件时,我看到奇怪的元数据被添加到文件顶部,就像这样,

-----------------------------33057860671031084693134041830 内容处置:表单数据;名称=“名称”

test.txt -----------------33057860671031084693134041830 内容处置:表单数据;名称=“文件”;文件名="test.txt" 内容类型:文本/纯文本

我也尝试过像 Pluploader (https://www.plupload.com/)这样的更正式的解决方案,我也面临同样的问题。我希望有人指出我正确的方向来解决它。非常感谢 Ant 的帮助。

参考:

  1. https://softwareontheroad.com/aws-s3-secure-direct-upload/
  2. 如何使用预签名 URL 而不是凭证直接从浏览器上传到 AWS S3?

工作解决方案

我已经用视频进行了测试,您不需要表格。直接发送数据即可

let video = document.getElementById("video_file").files[0];
var settings = {
    "url": url,
    "method": "PUT",
    "timeout": 0,
    "processData": false,
    "data": video
};
$.ajax(settings).done(function (response) {
    location.reload();
});

标签: javascriptjquerypython-3.xamazon-s3boto3

解决方案


我尝试txt使用两种方法上传带有 presigned-put-url 的文件:

  1. 发送表单数据:(这用于 POST url 而不是 PUT
  • 如问题中所述,这实际上将content-disposition标题添加到最终文件中。
  1. 发送原始二进制数据(推荐方式以及 PUT url 的使用方式!):
  • 该文件已正确上传,并且不包含content-disposition标题。

您可以尝试在PUT不使用的情况下发送请求formData吗?

ajax 的data属性值应该是file_datacontent-type而签署 S3 URL 和发送 (ajax) 的时间应该是ContentType: 'binary/octet-stream'

如果您需要使用 formData,请查看 S3 的 preSignedPost。


推荐阅读