Nuxt 3：使用formdata和useFetch将文件上传到nuxt的服务器引擎(nitro)？

Question

所以我写一个管理面板，需要发送一些图像文件，并存储在后台

这是我在组件中使用useFetch和formdata的示例脚本:

const {data,pending}=useFetch("/api/product",{
method:"post",
body:fd // Here i have my formdata containing files
})

服务器示例(~/server/api/product.post.ts):

import {defineEventHandler,readBody} from "h3";
export default defineEventHandler(async(event) => {
let body=await readBody(event); // I can get contents of my formdata here
// Here i need to parse formdata and save it in server
return {status:true, text:"saved successfully!"}
})

在next的服务器引擎(nitro)中没有像multer或任何东西可以使用它吗?如果我做错了什么就告诉我

Answer 1

我也遇到了同样的问题。我用Busboy库解决了这个问题。

首先，我创建了一个名为useffiles .js的文件，内容如下:

import Busboy from 'busboy'
const useFiles = async (event) => {
return new Promise((resolve) => {
const { req } = event
const files = []
const fields = {}
const busboy = Busboy({ headers: req.headers })
busboy.on('file', (name, file, info) => {
const { filename, encoding, mimeType } = info
var chunks = []
file.on('data', (chunk) => {
chunks.push(chunk)
})
file.on('end', () => {
files.push({
fieldname: name,
filename,
encoding,
mimetype: mimeType,
buffer: Buffer.concat(chunks)
})
})
})
busboy.on('field', (name, value, info) => {
fields[name] = value
})
busboy.on('finish', () => {
resolve({ files, fields })
})
req.pipe(busboy)
})
}
export default useFiles

，然后像这样实现:

export default defineEventHandler(async (event) => {
const { file, fields } = await useFiles(event) // file is a buffer

return 'ready'
})