HTTP PUT 與 Express.js & axios

Question

我正在嘗試將 canvas 從瀏覽器上傳到服務器...

瀏覽器 function：

function capture(canvas) {
    var canvas = document.getElementById(canvas);
    img = canvas.toDataURL()
    axios.put('/upload/'+document.title, img, {
        headers: {
          'Content-Type': 'text/plaintext'
        }
    })
}

服務器 function：

app.use(bodyParser.urlencoded({ extended: false }));
app.put('/upload/:title', (req, res) => {
    res.status(200)
    let filename = req.params.title
    console.log(req.body)
})

當捕獲 function 運行時，它確實在服務器上請求，但 req.body 為空。 我需要那個身體來保存到文件中。 一切正常，但最后，服務器上什么也沒有，這是我的主要問題。 我嘗試過具有各種正文內容的文本正文、數據正文，但沒有任何幫助。

Answer 1

嘗試使用 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)
            });
        });
    }

Answer 2

您需要將 canvas 轉換為Blob或ArrayBuffer ，然后以您更適合的格式將數據發送到服務器。