post表单提交form-data格式数据的具体实现方式

最新推荐文章于 2025-06-15 20:27:19 发布

maid_04

最新推荐文章于 2025-06-15 20:27:19 发布

阅读量1.6w

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： url 数据表单 json

本文链接：https://blog.youkuaiyun.com/maid_04/article/details/80112342

前端学习专栏收录该内容

25 篇文章

订阅专栏

本文分享了一次解决前端请求格式从JSON改为FormData的经历。在遇到API文档未明确指定请求格式的情况下，通过调整请求头成功实现了数据交互。文章提供了具体的Vue+Axios实现示例。

今天遇到这个问题了，因为我提交数据是json格式，然后服务端哥哥需要的是form-data格式，但是接口文档没有写，我就一直卡在数据请求这里。。。一直以为自己的问题，因为url没问题，可以请求道数据，但是请求的是错误信息，然后正确信息也一直不出现。。后来真的不知道哪里还有问题了，就厚着脸皮问了一下，结果问题竟然出在这里。。。好吧，既然你要的是form-data格式，那我就改咯，解决方式如下~

getUserInfo: function() {
  this.randomNum = randomNum(10);
  this.timeTamp = date.getTime();
  // 先创建一个FormData 对象
  let formData = new FormData();
  // 将请求参数一个一个append进去，因为涉及到项目内部东西，而且需要安全请求，所以就随便写了几个键值代替
  formData.append('x1','x1content');
  formData.append('x2',x2content);
  // 我用的vue-cli+webpack搭建的项目，所以就用了vue的axios去请求的数据
  axios.post(url,formData).then(resp => {
    this.list = Object.assign([], resp.data.data);
//这个遍历是我获取到时间戳转换成普通数据格式用的，所以可以忽略，如果看到这篇博客的人想了解一下这个函数是怎么封装的，可以去看一下我另外一篇博客，时间戳的转换问题
    for(let i = 0; i < resp.data.data.length; i++){
      this.list[i].start_timestamp = getLocalTime(new Date(resp.data.data[i].start_timestamp));
      this.list[i].end_timestamp = getLocalTime(new Date(resp.data.data[i].end_timestamp));
    }
    console.log(resp.data);
  }).catch(err => {
    console.log(err);
  })
}