Nuxt 3:使用formdata和useFetch将文件上传到nuxt的服务器引擎(Nitro)？
Nuxt 3:使用formdata和useFetch将文件上传到nuxt的服务器引擎(Nitro)？
提问于 2022-11-18 12:21:56
因此，我编写了一个管理面板，需要发送一些图像文件并将它们存储在后端。
这是我在组件中使用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!"}
})在nuxt的服务器引擎(nitro)中，难道没有什么像multer之类的东西可以使用吗？告诉我如果我做错了什么
回答 1
Stack Overflow用户
发布于 2022-11-23 03:36:37
我也有同样的问题。我用勤杂工图书馆解决这个问题。
首先，我创建了一个名为useFiles.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'
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74489624
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号