AWS S3 上传的图像已部分加载

Posted 2023-03-07

【中文标题】AWS S3 上传的图像已部分加载

【英文标题】：AWS S3 Uploaded Image is Partially Loaded

【发布时间】：2021-06-06 18:24:23

【问题描述】：

我正在尝试使用 aws-sdk 包从我的 Node.js 项目的文件结构中将本地存储的图像上传到我的 AWS S3 存储桶，并且能够成功上传它，但是，上传的图像是部分渲染的版本图片。当我查看 AWS 为图像创建的 URL 时，只有前 1% (12kb) 可见。我已将文件注销到控制台并确保它是我认为的那样，并且确实如此。但是由于某种原因，当我将其上传到 S3 时，它是图像的截断/截断版本。

所有教程看起来都很简单，但似乎没有人提到这个问题。我一直在努力解决它几个小时，但似乎没有任何效果。我已经尝试了所有可以在网上找到的方法，例如：

使用 fs.createReadStream(fileName) 而不仅仅是文件缓冲区，但这不起作用（来自Image file cut off when uploading to AWS S3 bucket via Django and Boto3） 将缓冲区转换为 base64 字符串并以这种方式发送 添加 ContentLength 参数 将 ContentType 添加为图像的确切类型

以下是相关代码：

const aws = require("aws-sdk")
const  infoLogger  = require("./logger")

async function uploadCoverImage() 
    try 
        aws.config.update(
            secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
            accessKeyId: process.env.AWS_ACCESS_KEY_ID,
            region: "us-east-2",
        )
        const s3 = new aws.S3()

        fs.readFile("cover.jpg", (error, image) => 
            if (error) throw error
            const params = 
                Bucket: process.env.BUCKET_NAME,
                Key: "cover.jpg",
                Body: image,
                ACL: "public-read",
                ContentType: "image/jpg",
            
            s3.upload(params, (error, res) => 
                if (error) throw error
                console.log(`$JSON.stringify(res)`)
            )
        )
     catch (error) 
        infoLogger.error(`Error reading cover file: $JSON.stringify(error)`)
    

module.exports = uploadCoverImage

【问题讨论】：

您是说如果您使用 AWS 控制台从 S3 下载对象，那么该对象会正确显示吗？这表明您的上传代码不是问题。

不，它总是只加载少量内容，因为它是以这种方式存储的。如果您想亲自查看，这里是上传图片的链接：compendia-covers.s3.us-east-2.amazonaws.com/cover.jpg

仅供参考，我用一个小图像 (10KB) 和一个大图像 (12MB) 尝试了这个，并且两次都有效。 S3 中生成的图像是正确的。

您是否 100% 确定源图像文件有效？你能在你的 app/async/import 情况之外尝试最少的代码吗（只需运行 readfile 并在一个简单的 Node 应用程序中上传部分）。

尝试了你的建议，它奏效了。我发现它在通过 fs.createReadStream() 在我的代码库的不同部分完成下载图像之前正在上传，这就是它在 S3 中部分加载的原因。我从来没有注意到，因为我只在我的文件系统中看到了完整的图像。这是我第一次在 JS 中使用流。谢谢，贾莫德！

【参考方案1】：

我发现它在通过 fs.createReadStream() 在我的代码库的不同部分完成下载图像之前正在上传，这就是它在 S3 中部分加载的原因。我从来没有注意到，因为我只在本地文件系统中看到完全加载的图像。