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

Question

利用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`);

Answer 1

因为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请求的三种方式

Answer 2

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