如何在nuxt3中上传FormData文件

nuxt3中进行网络请求时，往往使用的是useFetch，当然其他使用方式如$fetch的。

使用useFetch时，有和axios类似的网络interceptor，可以使用Promise在interceptor中自行决定返回某种格式的response，这里不赘述，只简单记一些可能出错的点。

下面是一个简单的封装上传FormData的例子。

// path example：/api/upload
function upload<T>(path: string, file: File) {
  const formData = new FormData();
  formData.append('file', file);
  return useFetch<T>(path, {
    baseURL: 'https://www.xxxx.com', 
    key: path,
    method: 'POST',
    body: FormData,
  })
};

在这个例子中，将file文件挂载在名为“file”的formData中，然后传给useFetch的option中的body。

服务端就可以通过post类型的该上传接口路由从MultipartForm中取出名为file的文件，然后进行上传处理，然后组装返回给客户端的response。

有时候可能遇到的问题：no multipart boundary param in Content-Type
如下截图：

这个问题目前我遇到的就是由于从Vue3的前端项目，重构为nuxt3项目时，老代码中的错误。

错误的起因是在headers中多了一个内容类型Content-Type的声明（因为nuxt3在服务端渲染时，会自动添加含有boundary=的Content-Type）：

return useFetch<T>(path, {
    baseURL: 'https://www.xxxx.com', 
    key: path,
    method: 'POST',
    body: FormData,
    headers: { // 这里不要加Content-Type
        "Content-Type": "multiple/form-data"  
    }
  })

截图为：

对比一下在headers中添加Content-Type和不添加的效果对比：

1. 添加Content-Type，如下图红框所示：

2. 不添加Content-Type，nuxt3自动添加的是如下图所示：

从这2个对比的截图，我们可以看出，nuxt3在使用FormData类型的值给body字段时，会自动在Content-Type中加boundary信息。