FormData跟Qs.stringify的区别

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` 属性，例如：

handleUploadSuccess(response) {
  if (response && response.data && response.data.url) {
    // ...
  } else {
    console.error('Invalid response data:', response);
  }
  // ...
}

另外，还需要注意在传递数据给后端的时候，需要将数据格式化为符合后端要求的格式，例如使用 `FormData` 对象或者 `qs` 库进行序列化，具体实现方式需要根据后端 API 的要求来进行选择和调整。

formdata提交乱码

如果你使用的是前端框架如 Vue 或 React，可以在发送请求时设置请求头的Content-Type为"application/x-www-form-urlencoded;charset=UTF-8"，如下示例：

axios({
  method: 'post',
  url: 'your_url',
  data: qs.stringify(your_data),
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  }
})

如果你是手动构造表单提交，可以使用encodeURIComponent编码每个参数的值，如下示例：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'your_url');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.onload = function () {
  // handle response
};
var formData = new FormData();
formData.append('param1', encodeURIComponent('参数1的值'));
formData.append('param2', encodeURIComponent('参数2的值'));
xhr.send(formData);

注意，对于中文等非ASCII字符，需要先进行encodeURIComponent编码，再进行表单提交。