amazon-s3 - 上传图像 - 数据显示为 "���"�!1A"Qaq�2�B�#"并且图像为空白 - Next.js 应用程序上传到 DigitalOcean Spaces/AWS S3

Question

我试图让我的用户在 Next.js 应用程序中上传照片。我设置了一个远程数据库并正确地写入数据库，但图像是 appearing blank .我想这一定是传入数据的格式有问题。

这是我在 React 前端的代码:

async function handleProfileImageUpload(e) {
    const file = e.target.files[0];

    await fetch('/api/image/profileUpload', {
      method: 'POST',
      body: file,
      'Content-Type': 'image/jpg',
    })
     .then(res => {
         console.log('final:', res);
      })
  };

return (
    <label htmlFor="file-upload">
          <div>
            <img src={profileImage} className="profile-image-lg dashboard-profile-image"/>
            <div id="dashboard-image-hover" >Upload Image</div>
          </div>
    </label>
    <input id="file-upload" type="file" onChange={handleProfileImageUpload}/>
)

我在上面声明的"file"(const file = e.target.files[0]) 在 console.log(file) 上显示如下:

+ --------++-+-++-+------------+----++-+--7--7----7-���"�!1A"Qaq��2��B�#br���$34R����CSst���5����)!1"AQaq23B����
                                                                                                                ?�@��P�n�9?Y�
                                                                                                                             ޞ�p@��zE�  Nk�2iH��l��]/P4��JJ!��(�@�r�Mң[      ���+���PD�HVǵ�f(*znP�>�HRT�!W��\J���$�p(Q�=JF6L�ܧZ�)�z,[�q���   *
�i�A\5*d!%6T���ͦ�@J{6�6��
k@��:JK�bꮘh�A�%=+E      q\���H
q�Q��"�����B(��OЛL��B!Le6���(�� aY
                                  �*zOV,8E�2��IC�H��*)@4է4.�ɬ(�<5��j!§eR27��
��s����IdR���V�u=�u2a��

...等等。很长。

我正在上传到与 AWS S3 接口(interface)的 Digital Ocean 的 Spaces 对象存储。同样，我的应用程序是用 Next.js 编写的，并且我使用的是无服务器环境。

这是我发送到的 API 路由('/api/image/profileUpload.js'):

import AWS from 'aws-sdk';

export default async function handler(req, res) {

  // get the image data
  let image = req.body;

  // create S3 instance with credentials
  const s3 = new AWS.S3({
    endpoint: new AWS.Endpoint('nyc3.digitaloceanspaces.com'),
    accessKeyId: process.env.SPACES_KEY,
    secretAccessKey: process.env.SPACES_SECRET,
    region: 'nyc3',
  });
  
  // create parameters for upload
  const uploadParams = {
    Bucket: 'oscarexpert',
    Key: 'asdff',
    Body: image,
    ContentType: "image/jpeg",
    ACL: "public-read",
  };

  // execute upload
  s3.upload(uploadParams, (err, data) => {
    if (err) return console.log('reject', err)
    else return console.log('resolve', data)
  })

  // returning arbitrary object for now
  return res.json({});
};

当我使用 console.log(image) 时，它显示了与我在上面发布的相同的乱码字符串，因此我知道它得到的是完全相同的数据。也许这需要进一步解析？

上面的代码直接来自Digital Ocean tutorial但迎合了我的环境。我注意到“Body”参数，这是传入乱码字符串的地方。

我尝试过的:

• 在将“图像”传递给 Body 参数之前将其字符串化
• 使用multer-s3在后端处理请求
• 通过 Postman 请求(进来的图片是完全一样的乱码格式)

我已经在这个问题上花了几天时间。任何指导将不胜感激。

Answer 1

想通了。我没有在我的 Next.js 无服务器后端中正确编码图像。

首先，在前端，我发出了这样的获取请求。重要的是把它放在后端下一步的“表单”格式中:

async function handleProfileImageUpload(e) {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append('file', file);
    
    // CHECK THAT THE FILE IS PROPER FORMAT (size, type, etc)
    
    let url = false;
    await fetch(`/api/image/profileUpload`, {
      method: 'POST',
      body: formData,
      'Content-Type': 'image/jpg',
    })
}

有几个组件帮助我最终在后端完成了这项工作，所以我只打算发布我最终得到的代码。这是 API 路由:

import AWS from 'aws-sdk';
import formidable from 'formidable-serverless';
import fs from 'fs';

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async (req, res) => {

  // create S3 instance with credentials
  const s3 = new AWS.S3({
    endpoint: new AWS.Endpoint('nyc3.digitaloceanspaces.com'),
    accessKeyId: process.env.SPACES_KEY,
    secretAccessKey: process.env.SPACES_SECRET,
    region: 'nyc3',
  });

  // parse request to readable form
  const form = new formidable.IncomingForm();
  form.parse(req, async (err, fields, files) => {
    // Account for parsing errors
    if (err) return res.status(500);
    // Read file
    const file = fs.readFileSync(files.file.path);
    // Upload the file
    s3.upload({ 
      // params
      Bucket: process.env.SPACES_BUCKET,
      ACL: "public-read",
      Key: 'something',
      Body: file,
      ContentType: "image/jpeg",
    })
    .send((err, data) => {
      if (err) {
        console.log('err',err)
        return res.status(500);
      };
      if (data) {
        console.log('data',data)

        return res.json({
          url:  data.Location,
        });
      };
    });
  });
};

如果您有任何问题，请随时发表评论。