javascript - 防止 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 的帮助。
参考:
工作解决方案
我已经用视频进行了测试,您不需要表格。直接发送数据即可
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();
});
解决方案
我尝试txt
使用两种方法上传带有 presigned-put-url 的文件:
- 发送表单数据:(这用于 POST url 而不是 PUT)
- 如问题中所述,这实际上将
content-disposition
标题添加到最终文件中。
- 发送原始二进制数据(推荐方式以及 PUT url 的使用方式!):
- 该文件已正确上传,并且不包含
content-disposition
标题。
您可以尝试在PUT
不使用的情况下发送请求formData
吗?
ajax 的data
属性值应该是file_data
,content-type
而签署 S3 URL 和发送 (ajax) 的时间应该是ContentType: 'binary/octet-stream'
。
如果您需要使用 formData,请查看 S3 的 preSignedPost。
推荐阅读
- python - 打印用户输入字符串
- rust - 借用值在 Option::map 中的寿命不够长
- android - ViewPager 不显示 ListFragment 内容
- javascript - 在 laravel 中需要来自节点模块的包的问题
- python - 如何使用 sympy 库求解这个方程?
- java - 启用 vpc 端点时如何将 S3 对象从一个区域复制到另一个区域
- javascript - (JS) 使用 IF/Switch 语句更改滑块值
- parallel-processing - 并行运行单处理器作业的 N 次迭代
- apache-spark - 将所有数据从 Kafka 主题复制到接收器(文件或 Hive 表)的最推荐方法是哪种?
- angular - Angular2+ Cucumber & Protractor 拦截 http 调用