使用PUT请求上传MP3文件到S3得到空文件该如何解决？

问题根因 #

fetch的body参数不支持直接传入本地文件路径字符串，你当前代码上传到S3的是"~/Downloads/my-audio.mp3"这串文本本身，而非MP3文件的二进制内容，所以文件体积异常、无法正常播放。

解决方案 #

根据运行环境不同，处理方式如下：

1. Node.js 环境（服务端/本地脚本场景，无需用户交互） #

首先需要先通过Node内置的fs模块读取本地文件的二进制内容，再传入fetch的body参数，代码示例：

import fs from 'node:fs/promises'
import os from 'node:os'
import path from 'node:path'

// 解析~开头的路径为绝对路径
const audioPath = path.resolve(os.homedir(), 'Downloads/my-audio.mp3')
// 读取文件二进制内容
const audioBuffer = await fs.readFile(audioPath)

// 执行S3上传
await fetch(S3_PRESIGNED_URL, {
  method: "PUT",
  headers: {
    "Content-Type": "audio/mpeg",
  },
  body: audioBuffer,
})

如果上传的是大体积MP3，可以用文件流减少内存占用：

import { createReadStream } from 'node:fs'
// ...路径解析逻辑同上
const audioStream = createReadStream(audioPath)

await fetch(S3_PRESIGNED_URL, {
  method: "PUT",
  headers: {
    "Content-Type": "audio/mpeg",
  },
  body: audioStream,
})

2. 浏览器环境 #

浏览器出于沙箱安全限制，不允许JS直接读取本地任意路径的文件，必须通过<input type="file">组件让用户主动选择文件后才能读取内容上传。如果是Electron等自定义桌面端环境，可以调用平台暴露的文件系统API读取文件后上传，逻辑与Node.js环境一致。

内容的提问来源于stack exchange，提问作者antonwilhelm