vue3发送FormData格式的请求

1、在vue3的组合式API中使用

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const sendRequest = async () => {
  try {
  	// step1：创建FormData格式的ref对象
	const formData = ref(new FormData());
	
  	// step2：填充 FormData（key1，key2均为请求用的参数）
	formData.value.append('key1', 'value1');
	formData.value.append('key2', 'value2');
	// 如果是文件，可以这样添加
	formData.value.append('file', fileInput.files[0]);
	
	// step3：发送请求（将formData整个放进去）
  	// 使用了axios实例，需要先在单独的js文件中封装创建实例，创建实例可见下面的方式二的step1
    const response = await axios.post('/api/request', formData.value); 
    console.log(response);
  } catch (error) {
    console.error(error);
  }
};
sendRequest();
</script >

2、不使用vue3组合式API

import axios from 'axios';

const sendRequest = async () => {
	// 创建 FormData 对象
	const formData = new FormData();
	formData.append('key1', 'value1');
	formData.append('key2', 'value2');
	// 如果是文件，可以这样添加
	formData.append('file', fileInput.files[0]);

	// 发送请求有如下两个方式
	// 方式一：直接使用axios
	axios({
	  method: 'post', // 或者 'put'、'patch' 等
	  url: '/api/request', // 请求api
	  data: formData,
	  headers: {
	    'Content-Type': 'multipart/form-data' // 通常不需要手动设置，Axios会自动处理
	  }
	})
	.then(response => {
	  // 处理响应数据
	  console.log(response);
	})
	.catch(error => {
	  // 处理错误
	  console.error(error);
	});
	
	// 方式二：使用axios实例方法
	// step1：先创建axios实例
	const instance = axios.create({
	  baseURL: 'https://some-domain.com/api/',
	  timeout: 1000,  // 可选项
	  headers: {'Content-Type': 'multipart/form-data'}  // 通常不需要手动设置，Axios会自动处理
	});
	// step2：发送请求
	instance.post('/api/request', formData)
	  .then(response => {
	    // 处理响应数据
	    console.log(response);
	  })
	  .catch(error => {
	    // 处理错误
	    console.error(error);
	  });
};
sendRequest();