通过 Express JS 在 Vercel Blob 中上传的图像损坏

Question

我在 vercel 上托管了一个 Express js 服务器（节点版本：v21.7.1），当我尝试通过 Express 服务器在 Blob 上上传照片时，除了上传的图像损坏且只有 15B 之外，一切正常。

我尝试了两种方法来解决这个问题，但在这两种方法中，我得到的唯一结果是 200 状态代码，但带有 15B 图像，即使图像已正确上传（另请注意，我正在邮递员上测试所有内容） .

1. 看跌期权 路线：

import multer from "multer";
const upload = multer();

router.route('/:id').put(upload.single('photo'), userController.updateUser)

控制器：

export const updateUser = catchAsync(async (req, res, next) => {
  try{  
    if(req.file){
      const filename = `user-${req.user.id}-${Date.now()}.jpeg`;
      console.log(req.file);

      const result = await put(filename, req.file, 
        { access: 'public', 
        token : process.env.BLOB_READ_WRITE_TOKEN,
        addRandomSuffix: false,
      },); 
     
      console.log({result});
    }

    //db stuff...

} catch (err) {
  res.status(400).json({
    status: 'error',
    message: err.message,
  });
}
});

控制台结果：

{
  fieldname: 'photo',
  originalname: '_ (20).jpeg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  buffer: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 01 00 48 00 48 00 00 ff db 00 43 00 06 04 05 06 05 04 06 06 05 06 07 07 06 08 0a 10 0a 0a 09 09 0a 14 0e 0f 0c ... 34195 more bytes>,
  size: 34245
}
{
  result: {
    url: 'https://jjsfgfmzoftauon7.public.blob.vercel-storage.com/user-65e31000c48a3a97e1a5147a-1711101529160.jpeg',
    downloadUrl: 'https://jjsfgfmzoftauon7.public.blob.vercel-storage.com/user-65e31000c48a3a97e1a5147a-1711101529160.jpeg?download=1',
    pathname: 'user-65e31000c48a3a97e1a5147a-1711101529160.jpeg',
    contentType: 'image/jpeg',
    contentDisposition: 'inline; filename="user-65e31000c48a3a97e1a5147a-1711101529160.jpeg"'
  }
}

2. 致电后：

路线：

router.post('/uploadPhoto', upload.single('photo'), userController.uploadFile);

控制器：

 export const uploadFile = async (req, res) => {
  try {
    const file = req.file;
    console.log({file});
    const blob = await put(file.originalname, file, { access: 'public' , token : process.env.BLOB_READ_WRITE_TOKEN,  });
    console.log({blob});
    res.json({blob});
  } catch (err) {
    res.status(500).json({ error: 'An error occurred while uploading the file.' });
  }
}

控制台结果：

{
  file: {
    fieldname: 'photo',
    originalname: '_ (13).jpeg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    buffer: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 01 00 48 00 48 00 00 ff db 00 43 00 06 04 05 06 05 04 06 06 05 06 07 07 06 08 0a 10 0a 0a 09 09 0a 14 0e 0f 0c ... 21792 more bytes>,
    size: 21842
  }
}
{
  blob: {
    url: 'https://jjsfgfmzoftauon7.public.blob.vercel-storage.com/_%20(13)-uUVosoz5TYonKwqvrrso3dWtPjX8ON.jpeg',
    downloadUrl: 'https://jjsfgfmzoftauon7.public.blob.vercel-storage.com/_%20(13)-uUVosoz5TYonKwqvrrso3dWtPjX8ON.jpeg?download=1',
    pathname: '_ (13).jpeg',
    contentType: 'image/jpeg',
    contentDisposition: 'inline; filename="_%20(13).jpeg"'
  }
}

请注意，这两种方法都在本地主机和 vercel 上进行测试，在这两种情况下我都遇到了相同的问题。 另请注意，我正在通过邮递员中的表单数据选项发送数据

附注我不知道为什么，但在我这些天所做的数千次测试中，有一次我做对了： 但老实说我不记得我最后是怎么做到的。

如果您需要其他信息，请告诉我。谢谢。

编辑：

问题解决了✅

我是一个很愚蠢的问题：

await put(file.originalname, file.buffer, { ... });

我只需要传递缓冲区而不是整个文件

Answer 1

非常感谢您的编辑。我正在寻找同一问题的解决方案，除了最后一部分“file.buffer”之外，一切都在点上。这就是关键！！