Question

朋友，乡下人，借你的耳朵......

我正在为amazon s3签署我的网址，然后使用fileReader和Fetch将我的文件放入s3。虽然当我这样做时，我得到一个有趣的白色方块而不是我的图像： https://s3.amazonaws.com/hubbble/Gabe/lX4H0.png

const reader = new FileReader();
reader.onload = ((e) => {

  let s3headers = new Headers();
  s3headers.append("content-type", 'image/png');

  fetch(signedRequest, {
      method: 'PUT',
      headers: s3headers,
      body: e.currentTarget.result
  }).then((response)=>{
    console.log(response);
  });
});

权限问题？不要这么认为，因为你绝对可以查看图像
以某种方式腐败了？
可能是不正确的内容类型？

思考？感谢您的任何指导，一直在我的头上撞墙！

Answer 1

其内容似乎是base64编码的图像。也就是说，你上传的是一个文本文件，而不是一个二进制图像（然后说是image/png）你可以先转换它something like this。

Answer 2

如果有人来自 Node 环境，则解决方案是使用以下代码。我测试了这个并且它有效。不需要atob或做一些bytearray杂技。

      // base64DataString is the base64 string, which I assume you have
      // base64Data is a Buffer that is encoded in base64!
      // STEP 1: we remove the header of the dataUri string
      const base64Data = new Buffer.from(b64DataString.replace(/^data:image\/\w+;base64,/, ""), 'base64');


      // STEP 2: CALL PUT OBJECT
      s3.putObject(
        {
          Bucket: "your bucket name",
          Key: `yourfile.jpg`, // the key for S3 location 
          Body: base64Data,
          ContentEncoding: 'base64', // important to tell that the incoming buffer is base64
          ContentType: "image/jpeg", // e.g. "image/jpeg" or "image/png"
          ACL:'public-read'
        },
        (err, data) => {
          if(err) {
            reject(err)
            return;
          }
          console.log("UPLOAD SUCCESSFULLY:") //optional
          console.log(data) //optional
          resolve(data); // if this is in a promise, then include
        }
      )

通过Put上传到S3时获得有趣的白色方块

2 个答案: