利用axios发post请求,传参方式不对无法返回结果?

利用axios发post请求,这种传参方式就无法返回结果

   this.$axios.post('/annotation/images/upload', {
         imgBase64: mycanvas.toDataURL('image/png'),
          filename: `${annotationId}.png`
    })

用这种写法就可以返回为什么?

   var params = new URLSearchParams();
        params.append('imgBase64', mycanvas.toDataURL('image/png'));
        params.append('filename', `${annotationId}.png`);
阅读 2.7k
2 个回答

因为Request Header中Content-Type: application/x-www-form-urlencoded;charset=UTF-8,在这种默认情况下axios将javaScript中的对象序列化为json,有两种方式:
1.在浏览器中,可以URLSearchParams按如下方式使用API:

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

2.利用qs库进行编码:

  import qs from 'Qs'
  this.$axios.post('/annotation/images/upload', qs.stringify({
          imgBase64: mycanvas.toDataURL('image/png'),
          filename: `${annotationId}.png`
        }))
var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

可以参考
axios-npm

axios提交post请求的三种方式

你们后台不支持传json,URLSearchParams参数序列化

推荐问题
宣传栏