s3 上传的图片文件未查看

Question

我正在使用 s3 上传图像文件。但是每当我尝试使用 URL 以及从 s3 控制台下载时，都会下载图像文件。但是，它不会对图像查看器可见。它只是显示不兼容的文件类型。

myS3Function.uploadFile(request.body.fileName, request.files.myFileData, "image_folder").then(filename => {
 //success
})

.

const AWS = require('aws-sdk');

const s3 = new AWS.S3({
 region: process.env.REGION
});

exports.uploadFile  = (filename, data, folderName) => {
return new Promise((resolve, reject) => {
    const params = {
        Bucket: process.env.AWS_S3_BUCKET, 
        Key: folderName+'/'+filename,
        Body: data.data,
        ACL:'public-read',
        ContentType: "image/jpeg"
    };
    s3.upload(params, function(s3Err, data) {
        if (s3Err) reject(s3Err)
        console.log(`File uploaded successfully at ${data.Location}`)
        resolve(`${data.Location}`)

    });
});
}

我现在使用邮递员上传文件作为表单数据。我可以正确看到使用此代码上传的文本文件。那么为什么图像有问题呢？ 此外，图片和 pdf 的实际文件大小略有增加。

Answer 1

您需要将Body 作为Buffer 或ReadableStream 发送，因此在将其发送到s3 api 之前，您需要将request.files.image 作为Buffer 读取。还将内容类型添加到请求标头

我没有使用你的相同堆栈，但这是我的工作代码

CURL 测试命令

curl -X 'PUT' \
 'http://localhost/api' \
 -H 'accept: _/_' \
 -H 'Content-Type: multipart/form-data' \
 -F 'image=@/Users/some/dir/userprofilesample1.jpg;type=image/jpeg'

S3 api 调用 - 我没有指定 ContentType

.upload({
        Body: content, // Buffer | ReadableStream
        Bucket: bucketName,
        Key: path,
        ACL:  'public-read',
      })

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html

Answer 2

我不确定问题出在哪里，但似乎无服务器脱机在处理作为 multipart/form-data 传入的数据时遇到了问题。最简单的解决方案是将文件编码为 base64 并将有效负载作为 application/json 发送。

要将文件编码为 base64，请使用此网站：https://base64.guru/converter/encode/file。在本地和以编程方式执行此操作很简单，但该网站是跨平台的，应该足以进行测试。

请求

有效载荷：

{

    "fileName": "sampleFile.jpg",
    "myFileData": "R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==",
    "fileType": "image/jpeg",
    "productId": 12,
    "isDefault": false,
    "position": 2
}

product-image.js

const s3Functions = require('../services/s3Functions')
const { KEY_S3_PRODUCT_IMAGES_FOLDER } = require('../util/constants');
const { KEY_STATUS, KEY_DATA } = require('../util/constants');

exports.uploadProductImage = (body) => {
    return new Promise((resolve, reject) => {
        s3Functions.uploadFile(
            body.fileName,
            body.myFileData,
            body.fileType,
            KEY_S3_PRODUCT_IMAGES_FOLDER
        ).then(filename => {
            resolve({ [KEY_STATUS]: 1, [KEY_STATUS]: "Uploaded successfully", [KEY_DATA]: filename });
        }).catch(error => {
            reject({ [KEY_STATUS]: 0, [KEY_STATUS]: "Upload Failed", [KEY_DATA]: error });
        });
    })
}

s3Functions.js

const AWS = require('aws-sdk');

const s3 = new AWS.S3({
    params: { Bucket: 'rename-me', ACL:'public-read' },
});

exports.uploadFile = (
    filename,
    data,
    contentType,
    folderName
) => {
    console.log('Uploading')
    return new Promise((resolve, reject) => {
        const params = {
            Key: folderName+'/'+filename,
            Body: Buffer.from(data, 'base64'),
            ContentEncoding: 'base64',
            ContentType: contentType,
        };
        s3.upload(params, function(s3Err, data) {
            if (s3Err) {
                console.error(s3Err);
                reject(s3Err)
            }
            console.log(`File uploaded successfully at ${data.Location}`)
            resolve(`${data.Location}`)
        });
    });
}

Here's the codebase 您在另一个线程上提供了包含的更改。我还没有清理它，但以防万一你遇到任何问题。

Answer 3

正如您问题的不同 cmet 中所指出的，有几件事可以激发您的问题。

请确保您提供了有关应被视为二进制的不同内容类型的必要配置。 AWS documentation 提供了有关它的详细信息；这个related SO question 也很有价值。

由于您使用的是serverless 框架，如您引用的链接1 2 中所示，请同时提供必要的配置：

provider:
  apiGateway:
    binaryMediaTypes:
      - 'multipart/form-data'

无论如何，似乎即使使用这种配置，您仍然面临问题。您告诉您能够成功上传文本文件，但您的图像已损坏，增加了它们的大小：如 cmets 所示，这似乎清楚地表明在某些地方信息正在转换为不同的编码，从二进制到文本，类似的东西。实际上，根据您的依赖关系，这似乎是实际问题，正如serverless-http 库的this issue 中所报告的那样，尤其是在serverless-offline 库的其他1 和2 中。

我认为这个问题只是本地问题，它可能会在 AWS 中正​​常工作，而不会出现进一步的问题。

无论如何，正如您在上述第一个问题中看到的，与serverless-http 相关的问题，该库具有以下代码：

return Buffer.from(event.body, event.isBase64Encoded ? 'base64' : 'utf8'); 

因此，作为一种解决方法，以 base 64 编码提交信息可以解决问题：如果您在 HTML 中使用表单提交，这不是一项简单的任务 - 例如，请参阅great example 了解一些想法 - 尽管它如果您直接从代码中与您的 API 交互，则可以做到这一点。唯一必要的更改是在您的 params 变量中：

const params = {
  Bucket: process.env.AWS_S3_BUCKET, 
  Key: folderName+'/'+filename,
  Body: Buffer.from(data.data, 'base64'),
  ContentEncoding: 'base64',
  ContentType: 'image/jpeg',
  ACL:'public-read',
};

请注意Buffer.from(..., 'base64') 的使用和ContentEncoding: 'base64' 的包含。

无论如何，如果代码在 AWS 中有效，我认为要等待serverless-offline 问题解决。