jquery - jQueryFileUpload - S3 - 空文件上传结果错误
问题描述
我正在尝试使用 jQuery File Upload 库(https://github.com/blueimp/jQuery-File-Upload/wiki/Upload-directly-to-S3)设置 S3 直接上传。我正在使用他们的最新版本,这是我初始化插件的方式:
$(function() {
$("#s3-uploader").data(
"key",
$("#s3-uploader")
.find("input[name='key']")
.val()
);
var settings = { path: "" };
$("#s3-uploader").fileupload({
limitConcurrentUploads: 1,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
dataType: "xml",
paramName: "file",
formData: function(form) {
var data, fileType, key;
data = form.serializeArray();
fileType = "";
if ("type" in this.files[0]) {
fileType = this.files[0].type;
}
data.push({
name: "content-type",
value: fileType
});
key = $("#s3-uploader")
.data("key")
.replace("{timestamp}", new Date().getTime())
.replace("{unique_id}", this.files[0].unique_id);
data[1].value = settings.path + key;
if (!("FormData" in window)) {
$("#s3-uploader")
.find("input[name='key']")
.val(settings.path + key);
}
return data;
}
});
});
以下是我为满足 S3 要求而发送的额外表单数据:
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="key" id="key" value="uploads/{timestamp}-{unique_id}-4c9ded19e2649ab92c6d37e6e30e679a/${filename}">
<input type="hidden" name="acl" id="acl" value="public-read">
<input type="hidden" name="AWSAccessKeyId" id="AWSAccessKeyId" value="<KEY>">
<input type="hidden" name="policy" id="policy" value="<POLICY>">
<input type="hidden" name="signature" id="signature" value="JOK4zvx/jAJbUXHzWGGUJ8pxk5E=">
<input type="hidden" name="success_action_status" id="success_action_status" value="201">
<input type="hidden" name="X-Requested-With" id="X-Requested-With" value="xhr">
上传正确发生并且文件在 S3 中可用,但是上传会引发此错误:Empty file upload result
S3 的响应是一个 XML 文档:
<PostResponse><Location>htps://my-bucket.s3-accelerate.amazonaws.com/uploads%2F1583345823865-undefined-4c9ded19e2649ab92c6d37e6e30e679a%2F_102035t8.JPG</Location><Bucket>my-bucket</Bucket><Key>uploads/1583345823865-undefined-4c9ded19e2649ab92c6d37e6e30e679a/_1020358.JPG</Key><ETag>"c77b13bec857d9470f360b363f7fb045"</ETag></PostResponse>
如何让 jQuery File Upload 处理来自 S3 的响应并将其视为成功并解析 S3 URL?谢谢!
解决方案
看起来 jQuery File Upload 无法自行处理这种情况。即它不解析S3 返回的XML 文档。我从 gem 中借了一些代码s3_direct_upload
来完成工作。你可以在这里找到它:https ://github.com/waynehoover/s3_direct_upload/blob/master/app/assets/javascripts/s3_direct_upload.js.coffee#L72
推荐阅读
- pandas - 如何将带有行和列标签的矩阵外观数据框转换为常规熊猫数据框?
- javascript - Django 中 JSON 响应的替代渲染取决于请求的来源
- visual-studio - 为什么程序运行时Visual Studio没有响应?
- wordpress - 无法隐藏
- Wordpress 中的元素
- r - 抑制 Outlook 弹出窗口允许在 R 中访问
- javascript - cookie 在页面更改或重新加载时自行删除
- pandas - 过滤 DataFrame Pandas 数据时间
- azure - 运行失败:无法在 Azure ML 服务管道中建立 SSH 连接
- delphi - 使用 Delphi 检查文件是文本文件还是二进制文件
- javascript - 文件上传导致 PDF 文件以外的问题