IndexedDB 如何使用签名的URL和JavaScript将二进制字符串文件上传到Amazon S3?

qlckcl4x  于 2022-12-09  发布在  IndexedDB
关注(0)|答案(1)|浏览(189)

我没有遇到任何麻烦,获得签署的网址,文件实际上是得到上传到S3,但当我下载文件,我不能打开它。我已经尝试了PDF和图像文件。
我得到的文件如下所示,其中'e'是来自浏览器文件输入的文件上载事件:

let fileData = e.target.files[0];
   let reader = new FileReader();
   reader.readAsBinaryString(fileData); // generates a binary representation of the image
   reader.onload = function(e) {
      let bits = e.target.result;
      let data = {
         originalFilename: fileData.name,
         filename: fileData.name,
         mimeType: fileData.type,
         fileSizeBytes: fileData.size,
         lastModified: fileData.lastModified,
         bin: bits
      };
   }

我将'data' json存储在IndexeddB中,稍后当浏览器在线时,我会得到一个签名的URL,并尝试如下上传:

// signedUrl is the signed URL
// data is the saved file data from the IndexeddB (above)
let contentType = data.mimeType
let binaryString = data.bin;  // bin is a binary string
let formData = new FormData();
formData.append("file", btoa(data.bin));

// upload the file directly to AWS
return $.ajax({
    url: signedUrl,
    method: "POST",
    contentType: contentType ,
    data: formData,
    processData: false
})
.then(function (response) {
    console.log(response);

})
.catch(function (e) {
    console.log('Error in file upload to AWS:');
    console.log(e);
    throw('Upload failed');
})

如果你有File对象(或者你正在使用Postman),有很多例子展示了如何将文件发布到签名的URL,但是我的Web应用允许用户离线“上传”文件,并且它们以二进制字符串的形式存储在IndexeddB中。这一切都很好,我可以很容易地将文件发布到我的服务器,重新创建文件,然后将它们发送到S3,但是我想避免额外的行程。
我已经尝试创建一个斑点和相当多的其他东西,我被卡住了。任何帮助都将不胜感激。
真的,我需要知道的只是“在发布数据中发布到签名URL的文件到底是什么格式,我如何将我的文件数据转换为这种格式?”

14ifxucb

14ifxucb1#

好了,我终于知道该怎么做了。亚马逊网站上的文档很少,网上有很多错误信息。你只需要重新创建文件Blob(不要使用fileData):

// signedUrl is the signed URL
// data is the saved file data from the IndexeddB (above)
let contentType = data.mimeType
let binaryString = data.bin;  // bin is a binary string

// rebuild the file object as a Blob to send to Amazon
let bytes = new Uint8Array(binaryString.length);

for (let i=0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
}

let file = new Blob([bytes], {type: contentType});

// upload the file directly to AWS
return $.ajax({
    url: signedUrl,
    method: "POST",
    contentType: false,
    data: file,
    processData: false
})
.then(function (response) {
    console.log(response);

})
.catch(function (e) {
    console.log('Error in file upload to AWS:');
    console.log(e);
    throw('Upload failed');
})

相关问题