使用Express.js和axios进行HTTP PUT

问题描述

我正在尝试将画布从浏览器上传到服务器...

浏览器功能：

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)
})

捕获功能运行时，它确实在服务器上发出请求，但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 然后以更适合的格式将数据发送到服务器。