<think>我们正在处理一个Vue2项目中使用axios发送POST请求，Content-Type为application/x-www-form-urlencoded，并且需要传递数组参数processStatus: ['0', '2']的情况。 根据引用[2]和引用[5]中的示例，我们知道使用qs.stringify可以正确格式化参数。但是，默认情况下，qs.stringify会将数组转换为带索引的格式，如：processStatus[0]=0&processStatus[1]=2。然而，有些后端可能期望不带索引的重复键名形式（如：processStatus=0&processStatus=2）。 在qs库中，我们可以通过设置arrayFormat选项来控制数组的序列化方式。具体来说，我们可以选择'repeat'模式来生成重复的键值对。 步骤： 1. 安装qs库（如果尚未安装）：`npm install qs` 2. 在组件中引入qs：`import qs from 'qs';` 3. 在发送请求时，使用qs.stringify对参数进行序列化，并设置arrayFormat选项为'repeat' 示例代码： ```javascript import qs from 'qs'; // 在Vue方法中 let params = { processStatus: ['0', '2'], // 其他参数... }; axios.post( '/your-api-endpoint', qs.stringify(params, { arrayFormat: 'repeat' }), // 关键：设置数组格式为重复键 { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } } ) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 这样，请求体将会是：`processStatus=0&processStatus=2`（以及其他参数），符合x-www-form-urlencoded格式，并且以重复键的方式传递数组。 注意：如果后端要求不同的数组格式（如带索引），可以调整arrayFormat选项。qs支持的数组格式选项有： - indices: 带索引的数组，如processStatus[0]=0&processStatus[1]=2（默认） - brackets: 不带索引只带方括号，如processStatus[]=0&processStatus[]=2 - repeat: 重复键，如processStatus=0&processStatus=2 - comma: 用逗号分隔，如processStatus=0,2 根据后端的要求选择合适的格式。如果没有特别要求，重复键（repeat）是常见的一种方式。 另外，引用[1]和引用[5]中提到的错误做法是直接使用JSON.stringify，这会导致请求体是JSON字符串，但设置了x-www-form-urlencoded的Content-Type，导致服务器无法解析。 所以，关键点就是使用qs.stringify并设置arrayFormat为'repeat'（或者根据后端要求选择其他格式）。 如果后端要求数组参数以逗号分隔传递，则可以使用： qs.stringify(params, { arrayFormat: 'comma' }) 但请注意，逗号分隔的数组在遇到元素本身包含逗号时会有问题，所以重复键的方式更通用。 因此，根据问题描述，我们选择arrayFormat: 'repeat'即可。 总结步骤： 1. 引入qs 2. 使用qs.stringify(data, { arrayFormat: 'repeat' })处理参数 3. 设置请求头Content-Type为application/x-www-form-urlencoded </think> 在 Vue2 中使用 `application/x-www-form-urlencoded` 格式传递数组参数 `processStatus: ['0', '2']` 的正确方法如下： ### 完整解决方案 ```javascript // 1. 安装并引入qs库 import qs from 'qs'; // 2. 在axios请求中使用 axios.post('/your-api-endpoint', qs.stringify({ processStatus: ['0', '2'] // 直接传递数组 }, { arrayFormat: 'repeat' }), // 关键配置 { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } } ) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` ### 关键点说明 1. **必须使用 `qs.stringify`** - 直接使用 `JSON.stringify` 会生成 JSON 字符串而非 URL 编码格式[^1][^5] - 安装 QS 库：`npm install qs` 或 `yarn add qs` 2. **数组格式配置 `{ arrayFormat: 'repeat' }`** - 此配置将数组转换为重复键值对格式：`processStatus=0&processStatus=2` - 其他可选格式： - `indices` (默认)：`processStatus[0]=0&processStatus[1]=2` - `brackets`：`processStatus[]=0&processStatus[]=2` - `comma`：`processStatus=0,2` 3. **请求头必须匹配** ```javascript headers: { 'Content-Type': 'application/x-www-form-urlencoded' } ``` ### 常见错误及修复 ```javascript // ❌ 错误示例1：缺少QS处理 axios.post('/api', { processStatus: ['0','2'] }, { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }) // 服务器将收到JSON对象而非编码字符串 // ❌ 错误示例2：错误使用JSON.stringify axios.post('/api', JSON.stringify({...}), { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }) // 生成无效格式[^1] // ✅ 正确修复 axios.post('/api', qs.stringify({...}, {arrayFormat:'repeat'}), { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }) ``` ### 全局配置方案（推荐） ```javascript // main.js import axios from 'axios' import qs from 'qs' axios.defaults.transformRequest = [(data) => { return qs.stringify(data, { arrayFormat: 'repeat' }) }] axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' ``` > **提示**：后端接收时应支持重复键名解析（如Spring Boot的`@RequestParam List<String> processStatus`）[^2][^5]。