Nuxt4 如何传递文件,服务端如何接收文件

发布时间:9/3/2025
更新时间:9/3/2025
展示:398

在Nuxt4中前端可以利用FormData向服务器传递文件,然后服务端可以利用 readFormData 读取请求体中的文件。

传递文件

发送请求时,用 FormData 格式传递文件

const formData = new FormData()
formData.append('file', file)

await $fetch('/api/file/upload',{
  method:'POST',
  body:formData,
})

这里注意不要设置 Content-Type 头, 否则会导致服务端无法解析文件,我就是加上了 'Content-Type': 'multipart/form-data', 然后使用 readFormData 方法一直报错 Failed to parse body as FormData

接收文件

在服务端,可以利用 readFormData 方法接收文件

export default defineEventHandler(async (event) => {
  const formData = await readFormData(event)
  const file = formData.get('file')

  if(!file){
    return createError({
      statusCode: 400,
      statusMessage: 'not found file or name',
    })
  }

})

转换为文件流

利用文件对象的 stream 方法可以将文件转换为文件流。但是注意,这是在Web端可用的流,如果要在服务端使用,需要转换为node服务端的读写流。

这里使用 node:stream 模块将文件流转换为node服务端的读写流

import { Readable  } from 'node:stream'

const readStream = file.stream()
const nodeStream = Readable.fromWeb(readStream)
目录
  • 传递文件
  • 接收文件
  • 转换为文件流