对AWS S3的REECT上传损坏的文件上传

发布于 2025-02-02 03:21:29 字数 973 浏览 4 评论 0 原文

我已经尝试了多个代码上传，从Axios到获取。但是，它总是得到相同的结果。这是它得到的最简单的：

    const formData = new FormData();
    formData.append('file', ref)

    const response = await fetch(
      new Request(res.uploadSignedUrl, {
        method: 'PUT',
        body: formData,
        headers: new Headers({
          'Content-Type': ref.type,
        })
      })
    )

上面的代码响应状态200，但是每当我访问上传图像的图像链接时，它都会给我一个小的白色盒子图像。

小白色盒子图像的屏幕截图

，当我以第二个参数对象删除request request fetter的标题时，内容类型是特定的，上载图像的链接不会将我转移到网站或其他任何内容。它只是自动下载了一个未知的文件类型，具有出人意料的上传图像的确切文件大小。

自动下载的屏幕截图

请注意，我已经尝试了多种文件类型尝试了一下。任何有关此问题的想法都将不胜感激。

编辑：另外，我设法与我们的后端开发人员联系。这是Postman的结果：有效载荷结果的屏幕截图

答案：我在此处评论

原文

I've already tried multiple code for uploading, from axios to fetch. But, it always end up with same result. Here's the simplest it get:

    const formData = new FormData();
    formData.append('file', ref)

    const response = await fetch(
      new Request(res.uploadSignedUrl, {
        method: 'PUT',
        body: formData,
        headers: new Headers({
          'Content-Type': ref.type,
        })
      })
    )

The code above is responding with status 200, but whenever I visit the image link of the uploaded image, it gives me a small white box image.

screenshot of small white box image

And when I remove the header at 2nd parameter object of request fetch, the Content-Type to be specific, the link of the uploaded image doesn't transfer me to a website or anything. It just automatically downloads an unknown file type with surprisingly the exact file size of the supposed to be uploaded image.

screenshot of automatic download

Do note that I've already tried this with multiple file types. Any given thoughts about this issue will be deeply appreciated.

Edit: Also, I managed to come in contact with our backend dev. Here's the result at postman I think: screenshot of payload result

ANSWER: I commented it here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

踏月而来 2025-02-09 03:21:29

答：

来自Reddit用户u/wombarly，

您正在上传表单数据，而不是实际图像。所以你
必须获取图像斑点并上传。

表单数据在有效载荷的顶部添加了webkitdisposition位
在屏幕截图中。当您将包含在文件中的S3上时。
破坏它。

这是我发现的文章，解释了：

您可以忽略反应本机位

这个问题的作者的其他注释：

我从来不知道有效载荷处的webkitdisposition导致该文件损坏了AWS S3。因此，我不得不添加另一个功能来发出文件URI并继续使用U/Wombarly的建议。其中我在此处使用代码： https://stackoverflow.com/a/50719098/18373031 由Srijita供参考。（_handleimagechange函数的URI变量）

回复收藏 0 原文

一人独醉 2025-02-09 03:21:29

如果您想将图像发送给您的后端家伙，然后他要将其上传到AWS存储桶，然后尝试将图像作为base64发送，那么他就可以按照自己的需要做任何事情。

从图像制作base64的示例代码

const canvas = document.createElement('canvas')
const c = canvas.getContext('2d')

canvas.height = image.height
canvas.width = image.height

c.drawImage(image, 0, 0, canvas.width, canvas.height)

const base64 = canvas.toDataUrl('image/png' , 1.0)

If you are trying to send image to you backend guy , and then he is gonna upload it to AWS Bucket , then try to send image as base64, then he is able to do whatever he needs with that.

sample code to make base64 from image

const canvas = document.createElement('canvas')
const c = canvas.getContext('2d')

canvas.height = image.height
canvas.width = image.height

c.drawImage(image, 0, 0, canvas.width, canvas.height)

const base64 = canvas.toDataUrl('image/png' , 1.0)

回复收藏 0 原文

~没有更多了~