nuxt3中如何处理文件上传?
时间: 2024-06-13 14:05:03 浏览: 18
在Nuxt3中处理文件上传可以使用FormData对象,将需要上传的文件和其他参数一起打包发送到后端。具体实现可以参考以下代码:
```javascript
// nuxt
const params = new FormData();
params.append('converter', epubFormValue.value.converter);
params.append('file', epubFormValue.value.fileList[0].file);
const res = await useFetch('/api/epub', { method: 'POST', body: params, });
// h3
import formidable from "formidable";
import type { H3Event } from "h3";
export default defineEventHandler(async (event) => {
const { files, _fields } = await readFiles(event);
console.log(_fields);
return { api: "works", };
});
function readFiles(
event: H3Event,
options?: formidable.Options
): Promise<formidable.Files> {
return new Promise((resolve, reject) => {
const form = formidable(options);
form.parse(event.req, (err, _fields, files) => {
if (err) reject(err);
resolve({ files, _fields });
});
});
}
```
以上代码中,我们使用了FormData对象将需要上传的文件和其他参数打包,然后使用useFetch方法将数据发送到后端。在后端,我们使用formidable库来解析请求,获取上传的文件和其他参数。