Nuxt4 如何传递文件,服务端如何接收文件
在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)