FormData跟Qs.stringify的区别
时间: 2024-01-19 08:59:59 浏览: 28
FormData和qs.stringify都是用来处理表单数据的工具。FormData是一个JavaScript内置的对象,用于创建表单数据。而qs.stringify是一个第三方库,用于将JavaScript对象序列化为URL编码的字符串。
FormData用于创建表单数据,可用于通过AJAX提交表单数据。它可以添加文本、文件和二进制数据。使用FormData时,您不需要手动编码表单数据,FormData会自动处理数据编码。
相反,qs.stringify是将JavaScript对象序列化为URL编码的字符串的工具。它通常用于构建查询字符串或将表单数据编码为URL编码格式。它将对象转换为字符串,以便可以将其附加到URL或通过AJAX请求发送。它还允许您设置编码选项,例如指定数组的索引格式、空格的处理方式等。
因此,FormData和qs.stringify都是用来处理表单数据的工具,但它们的目的和用法略有不同。FormData用于创建表单数据,而qs.stringify用于将JavaScript对象序列化为URL编码的字符串。
相关问题
handleUploadSuccess(response) { let data = { albumId: this.album.id, url: response.data.url }; let url = 'http://localhost:9180/pictures/add-new'; console.log('url = ' + url); let formData = this.qs.stringify(data); console.log('formData = ' + formData); let localJwt = localStorage.getItem('localJwt') this.axios .create({ 'headers':{ 'Authorization' : localJwt } }) .post(url, formData).then((response) => { let jsonResult = response.data; if (jsonResult.state == 20000) { this.loadPictureList(); } else { this.$alert(jsonResult.message, '警告', { confirmButtonText: '确定', callback: action => { } }); } }); }, // 加载相册的图片列表 loadPictureList() { let url = 'http://localhost:9180//picture/list?queryType=all&albumId=' + this.album.id; console.log('url = ' + url); let localJwt = localStorage.getItem('localJwt') this.axios .create({ 'headers':{ 'Authorization' : localJwt } }) .get(url).then((response) => { let jsonResult = response.data; if (jsonResult.state == 20000) { this.pictureList = jsonResult.data.list; } else { this.$alert(jsonResult.message, '警告', { confirmButtonText: '确定', callback: action => { this.$router.push('/sys-admin/product/album'); } }); } }); }
根据你提供的代码,可以看到 `handleUploadSuccess` 函数中使用了一个 `response` 参数,但是没有进行有效性检查,这可能会导致在上传失败时出现类似的 TypeError 错误提示。
你可以尝试在调用 `handleUploadSuccess` 函数时,先检查 `response` 参数是否存在,以及它是否具有 `data` 对象和 `url` 属性,例如:
```javascript
handleUploadSuccess(response) {
if (response && response.data && response.data.url) {
// ...
} else {
console.error('Invalid response data:', response);
}
// ...
}
```
另外,还需要注意在传递数据给后端的时候,需要将数据格式化为符合后端要求的格式,例如使用 `FormData` 对象或者 `qs` 库进行序列化,具体实现方式需要根据后端 API 的要求来进行选择和调整。
vue3怎么使用qs
在 Vue3 中使用 `qs` 库可以按照以下步骤:
1. 安装 `qs` 库
在终端中执行以下命令安装 `qs` 库:
```
npm install qs
```
2. 在需要使用的组件中引入 `qs`
在组件中引入 `qs` 库:
```javascript
import qs from 'qs'
```
如果你使用的是 TypeScript,可以在 `vue-shim.d.ts` 文件中添加以下代码:
```typescript
declare module 'qs' {
const qs: any
export default qs
}
```
这样就可以在组件中直接使用 `qs` 变量了。
3. 使用 `qs` 库处理请求数据
`qs` 库提供了许多方法来处理请求数据,例如 `qs.stringify` 用于将对象序列化为 URL 查询字符串,`qs.parse` 用于将 URL 查询字符串解析为对象等。
在组件中使用 `qs` 库处理请求数据的例子:
```javascript
import axios from 'axios'
import qs from 'qs'
export default {
methods: {
async submitForm(formData) {
try {
const response = await axios.post('/api/submit', qs.stringify(formData))
console.log(response.data)
} catch (error) {
console.error(error)
}
}
}
}
```
在上面的例子中,`qs.stringify` 方法将 `formData` 对象序列化为 URL 查询字符串,然后作为请求体发送给服务器。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)