如何使用 axios 將圖像作為應用程序/json 數據發布到 REST 端點？

Question

我需要將圖像數據發送到僅處理application/json數據的其余端點。

我有以下 axios 代碼適用於處理multipart/form-data數據的端點：

      let data = new FormData();
      canvas.toBlob(blob => {
        data.append("image", blob);
        this.loading = true;
        axios
          .post(this.annotateUrl, data, {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })

根據我發現的教程，我認為這應該可行。 但是端點似乎沒有得到任何數據。

      canvas.toBlob(blob => {
        let data = {
          image: blob
        }
        this.loading = true;

        axios
          .post(this.annotateUrl, data, {
            headers: {
              "Content-Type": "application/json"
            }
          })

有任何想法嗎？ 謝謝你。

Answer 1

您基本上可以將圖像添加到 html 畫布並調用畫布的“ toDataURL ”方法將圖像編碼為字符串。 然后，您可以將編碼的字符串作為 JSON 的屬性發送。

Answer 2

感謝 Ajay Ullal 的回答，我寫了這段代碼來解決這個問題：

let canvas = this.$parent.image.raster.canvas;

let dataurl = canvas.toDataURL();
let data = { image: dataurl };
this.loading = true;

axios
  .post(this.annotateUrl, data, {
    headers: {
    "Content-Type": "application/json"
    }
  })
  .then([...])
  .catch([...])
  .finally([...])

作為旁注，我注意到 axios 開始與圍繞CORS的預檢 OPTIONS 調用進行通信，這使事情變得更加復雜。 我建議密切關注瀏覽器的調試控制台以獲取錯誤/警告消息。