将 JS FileReader 与 FormData 结合使用
Using JS FileReader with FormData
我正在尝试将文件上传到 S3。我的 UI 支持拖放 和 文件输入元素,所以我的计划是从拖放和输入事件返回的 blob 开始,使用 FileReader 加载它们的内容,然后使用 FormData 进行处理。
问题在 *****
。看起来 .result
是一个非零大小的数组缓冲区,但我在 S3 上找到的只是一个名为 ${filename}
的 20b 文件,内容为 [object ArrayBuffer]
.
我在这个流程中遗漏了什么
function sendSigned(fileObj, cb) {
console.log("send signed", fileObj)
let formData = new FormData();
const host = "http://localhost:4000"
formData.append("key", fileObj.signature.stem + "${filename}");
formData.append("x-amz-algorithm", "AWS4-HMAC-SHA256");
formData.append("x-amz-credential", fileObj.signature.credential);
formData.append("x-amz-date", fileObj.signature.date);
formData.append("success_action_redirect", host + "/upload/success");
formData.append("policy", fileObj.signature.policy);
formData.append("x-amz-signature", fileObj.signature.signature);
let fileReader = new FileReader();
fileReader.onload = function(evt) {
console.log(evt);
// ******************************************
// formData.append("file", evt.target.result);
formData.append("file", fileReader.result);
jQuery.ajax({
url: 'http:\/\/uploads.s3.amazonaws.com',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: (res) => {
console.log(res);
let s3Conf = Object.assign(fileObj, {
confirmation: res.ETag,
zipname : fileObj.signature.stem + fileObj.nativeFiles[0].name,
status: "Done"
});
cb(s3Conf);
},
error: (err) => {
console.error(err);
let s3Conf = Object.assign(fileObj, {
error: err,
status: "Done"
});
cb(s3Conf);
}
});
}
fileReader.readAsArrayBuffer(fileObj.nativeFiles[0].blob);
}
您不能发送带有 FormData 对象的数组缓冲区(但是您可以将其作为整个 post 主体发送)。
FormData 接受 blob,因此您可以直接传递它。
function sendSigned(fileObj, cb) {
console.log("send signed", fileObj)
let formData = new FormData();
const host = "http://localhost:4000"
formData.append("key", fileObj.signature.stem + "${filename}");
formData.append("x-amz-algorithm", "AWS4-HMAC-SHA256");
formData.append("x-amz-credential", fileObj.signature.credential);
formData.append("x-amz-date", fileObj.signature.date);
formData.append("success_action_redirect", host + "/upload/success");
formData.append("policy", fileObj.signature.policy);
formData.append("x-amz-signature", fileObj.signature.signature);
formData.append("file", fileObj.nativeFiles[0].blob, fileObj.nativeFiles[0].name);
jQuery.ajax({
url: 'http:\/\/uploads.s3.amazonaws.com',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: (res) => {
console.log(res);
let s3Conf = Object.assign(fileObj, {
confirmation: res.ETag,
zipname : fileObj.signature.stem + fileObj.nativeFiles[0].name,
status: "Done"
});
cb(s3Conf);
},
error: (err) => {
console.error(err);
let s3Conf = Object.assign(fileObj, {
error: err,
status: "Done"
});
cb(s3Conf);
}
});
}
请注意,您的服务器端逻辑需要将字段名称读取为文件字段。
我正在尝试将文件上传到 S3。我的 UI 支持拖放 和 文件输入元素,所以我的计划是从拖放和输入事件返回的 blob 开始,使用 FileReader 加载它们的内容,然后使用 FormData 进行处理。
问题在 *****
。看起来 .result
是一个非零大小的数组缓冲区,但我在 S3 上找到的只是一个名为 ${filename}
的 20b 文件,内容为 [object ArrayBuffer]
.
我在这个流程中遗漏了什么
function sendSigned(fileObj, cb) {
console.log("send signed", fileObj)
let formData = new FormData();
const host = "http://localhost:4000"
formData.append("key", fileObj.signature.stem + "${filename}");
formData.append("x-amz-algorithm", "AWS4-HMAC-SHA256");
formData.append("x-amz-credential", fileObj.signature.credential);
formData.append("x-amz-date", fileObj.signature.date);
formData.append("success_action_redirect", host + "/upload/success");
formData.append("policy", fileObj.signature.policy);
formData.append("x-amz-signature", fileObj.signature.signature);
let fileReader = new FileReader();
fileReader.onload = function(evt) {
console.log(evt);
// ******************************************
// formData.append("file", evt.target.result);
formData.append("file", fileReader.result);
jQuery.ajax({
url: 'http:\/\/uploads.s3.amazonaws.com',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: (res) => {
console.log(res);
let s3Conf = Object.assign(fileObj, {
confirmation: res.ETag,
zipname : fileObj.signature.stem + fileObj.nativeFiles[0].name,
status: "Done"
});
cb(s3Conf);
},
error: (err) => {
console.error(err);
let s3Conf = Object.assign(fileObj, {
error: err,
status: "Done"
});
cb(s3Conf);
}
});
}
fileReader.readAsArrayBuffer(fileObj.nativeFiles[0].blob);
}
您不能发送带有 FormData 对象的数组缓冲区(但是您可以将其作为整个 post 主体发送)。 FormData 接受 blob,因此您可以直接传递它。
function sendSigned(fileObj, cb) {
console.log("send signed", fileObj)
let formData = new FormData();
const host = "http://localhost:4000"
formData.append("key", fileObj.signature.stem + "${filename}");
formData.append("x-amz-algorithm", "AWS4-HMAC-SHA256");
formData.append("x-amz-credential", fileObj.signature.credential);
formData.append("x-amz-date", fileObj.signature.date);
formData.append("success_action_redirect", host + "/upload/success");
formData.append("policy", fileObj.signature.policy);
formData.append("x-amz-signature", fileObj.signature.signature);
formData.append("file", fileObj.nativeFiles[0].blob, fileObj.nativeFiles[0].name);
jQuery.ajax({
url: 'http:\/\/uploads.s3.amazonaws.com',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: (res) => {
console.log(res);
let s3Conf = Object.assign(fileObj, {
confirmation: res.ETag,
zipname : fileObj.signature.stem + fileObj.nativeFiles[0].name,
status: "Done"
});
cb(s3Conf);
},
error: (err) => {
console.error(err);
let s3Conf = Object.assign(fileObj, {
error: err,
status: "Done"
});
cb(s3Conf);
}
});
}
请注意,您的服务器端逻辑需要将字段名称读取为文件字段。