nuxt3里面怎么使用useFetch进行formData数据进行文件上传

Question

nuxt3里面怎么使用useFetch进行formData数据进行文件上传，目前我自己试的方法如下，根本不对

这个 Api.uploadImage是我封装的post方法，但是实际的请求如下：

明显这不是正确的上传触发，我有试过将contentType设为 application/x-www-form-urlencoded一样没有任何作用，首先data参数都不太对

Answer 1

在Nuxt 3中使用useFetch进行formData数据进行文件上传的步骤如下：

1. 安装@nuxt/use-fetch模块：

npm install @nuxt/use-fetch

1. 在nuxt.config.js中注册模块：

export default {
  // ...
  buildModules: [
    '@nuxt/use-fetch'
  ],
  // ...
}

1. 在组件中使用useFetch来上传文件：

import { useFetch } from '@nuxt/use-fetch'

export default {
  async mounted() {
    const formData = new FormData()
    formData.append('file', this.file)

    const { data } = await useFetch('/api/upload', {
      method: 'POST',
      body: formData
    })

    console.log('File upload response:', data)
  }
}

其中，this.file是一个文件对象，用来上传到服务器。useFetch方法可以直接在组件中使用，第一个参数为API地址，第二个参数为Fetch API的初始化参数。

1. 在服务器端接收文件数据：

const { createServer } = require('http')
const { parse } = require('url')
const { Formidable } = require('formidable')

const server = createServer(async (req, res) => {
  const { pathname } = parse(req.url)
  if (pathname === '/api/upload') {
    const form = new Formidable()
    const data = await new Promise((resolve, reject) => {
      form.parse(req, (err, fields, files) => {
        if (err) reject(err)
        resolve({ fields, files })
      })
    })
    console.log('File uploaded:', data.files.file.name)
    res.end(JSON.stringify({ message: 'File uploaded successfully!' }))
  } else {
    res.end('Hello, world!')
  }
})

server.listen(3000, () => {
  console.log('Server started at http://localhost:3000')
})

其中，Formidable是用于解析表单数据的库，可以通过req对象解析上传的文件数据。在这个例子中，我们只处理了/api/upload地址的请求，其他请求将返回Hello, world!响应。

如果我的建议对您有帮助、请点击采纳、祝您生活愉快！