我正在尝试从浏览器上传画布到服务器。。。
浏览器功能:
function capture(canvas) {
var canvas = document.getElementById(canvas);
img = canvas.toDataURL()
axios.put('/upload/'+document.title, img, {
headers: {
'Content-Type': 'text/plaintext'
}
})
}
服务器功能:
app.use(bodyParser.urlencoded({ extended: false }));
app.put('/upload/:title', (req, res) => {
res.status(200)
let filename = req.params.title
console.log(req.body)
})
当capture函数运行时,它确实在服务器上请求,但req.body为空。我要把尸体存到文件里。一切都很好,但最终,服务器上什么都没有,这是我的主要问题。我尝试过文本主体,数据主体,以及各种主体内容,但都无济于事。
请尝试使用FormData。
示例(将canvas元素作为参数传递):
function fileUpload(canvas) {
let data = new FormData();
canvas.toBlob(function (blob) {
data.append('data', blob);
axios.post('/upload/'+document.title, data, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then(res => {
console.log(res)
});
});
}
您需要将画布转换为Blob或ArrayBuffer,然后将数据以您更适合的格式发送到服务器。