imgBase64Data是图片的Base64格式数据,当imgBase64Data比较小的时候(大概是几十KB),是可以上传成功的,但是到了几MB,一直报错:
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
下面是错误代码
this.axios({
method: 'post',
url: 'http://127.0.0.1:8888/uploadImage',
params: {
imgBase64Data: imgBase64Data
},
})
.then((response) => {
Toast('上传成功!')
}
})
.catch((response) => {
Toast.fail("上传失败!");
})
.then((response) => {});
疑惑了很久,查了半天看到这个讨论vue axios post请求发送图片base64编码给后台报错HTTP 错误 414
才明白原来必须要用data传入数据给后端,而不是params,要不然就上传不成功
因为params是添加到url的请求字符串中的,用于get请求。
而data是添加到请求体(body)中的, 用于post请求。(说到底还是基础不扎实 )
所以修改一下上面的代码,只需要把params改成data就行
this.axios({
method: 'post',
url: 'http://127.0.0.1:8888/uploadImage',
data: {
imgBase64Data: imgBase64Data
},
})
.then((response) => {
Toast('上传成功!')
}
})
.catch((response) => {
Toast.fail("上传失败!");
})
.then((response) => {});
至于后端怎么修改以接收前端发来的data数据,可以参考一下这篇文章【axios】get/post请求params/data传参总结
本人直接用Map接收了,凌晨了,终于解决了