从 S3 上传和显示图像答案

【问题标题】：Uploading and showing image from S3从 S3 上传和显示图像
【发布时间】：2021-01-04 03:12:45
【问题描述】：

我正在尝试通过反应应用程序将图像上传到 s3 存储桶，然后接收 URL 并在屏幕上显示图像。我能够上传图像（有点）并从 s3 服务器取回 URL，但是当我下载它时，我无法打开它 - 共振峰不受支持，我无法使用 img 标签显示它网页。我想这与与 base64 的对话有关，但我不知道为什么它不起作用。

前端（React）是：

const uploadImageToBucket = async (image) => {
    console.log("fff",image)
 

       let image_location
        try {
            const response = axios.post("http://localhost:5000/user/blogmanage/uploadimage",image)
         
            image_location = response.then((response)=>response.data.body);
            console.log("img loc", image_location)
    
            return image_location;
        } catch (error) {
            
        }
    
    
    }

后端（nodejs）是

    router.post("/blogmanage/uploadimage", async (req,res)=>{

    const s3 = new AWS.S3({
        accessKeyId: process.env["AWS_ACCESS_KEY_ID"],
        secretAccessKey: process.env["AWS_SECRET_KEY"],
        region: process.env['AWS_REGION']
      });
    const BUCKET_NAME = "mrandmrseatmedia";
  
    var base64data = new Buffer.from( 'binary',req.body);
    const params = {
        Bucket: BUCKET_NAME,
        Key: "test/test2.jpg",
        Body: base64data
    }
    
    s3.upload(params, function (err,data){
        if (err){
            console.log(err)
            res.status(404).json({msg:err});
        }
        else{
            const image_location = `${data.Location}`;
            console.log(`File uploaded successfully. ${data.Location}`);
            res.status(200).json({body:image_location});
        }
        
    })
   });

谢谢！

【问题讨论】：

image_location 仍然是一个承诺，你是如何使用它的？
图像位置不是问题。我得到了我应该做的 URL。问题，我猜，是上传。根据您的问题，image_location 仅返回我嵌入在 Quill 文本编辑器中的 URL
我尝试“手动”将 URL 插入到 img 标签，但它仍然不起作用

标签： node.js reactjs amazon-s3

【解决方案1】：

以这个 repo 为例，经过大量的测试和重新测试和重写 https://github.com/Jerga99/bwm-ng/blob/master/server/services/image-upload.js 它有效。

在这种情况下使用 base64 是错误的。它以某种方式损坏了文件。 Multer 库修复了它。

【讨论】：