将 JS FileReader 与 FormData 结合使用

Question

我正在尝试将文件上传到 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);
}

Answer 1

您不能发送带有 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);
        }
    });

}

请注意，您的服务器端逻辑需要将字段名称读取为文件字段。

将 JS FileReader 与 FormData 结合使用

Using JS FileReader with FormData

javascript

multipartform-data

amazon-s3

filereader

arraybuffer