感謝大大回覆，上傳問題在分離base64字串之後，貌似可以上傳了，但前面還有問題沒提到，就是

抓不到浮水印的圖檔：

  //在addWatermark之後抓DataURL
const addWatermark = () => {
    ...略
    let dataUrl = canvas.toDataURL();
    ...略
};

  //按下載按鈕取得的DataURL
const downloadImg = () => {
  ...略
  let dataUrl = canvas.toDataURL();
  ...略
};

上面兩個明明都是在加完浮水印才抓的，但是兩個的結果卻不一樣，上面是抓到奇怪的空白，而下面卻是正確的圖檔

但是我不需要下載的功能，不知道要如何改寫才能正確取得圖檔且上傳

這一段程式有問題：

      const addWatermark = () => {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        img = document.createElement("img");
        img.onload = render;
        img.src = imgUrl;

        let dataUrl = canvas.toDataURL();
        console.log("addWatermark", dataUrl);

        //dataURL格式分離
        var block = dataUrl.split(";");
        var realData = block[1].split(",")[1]; // In this case "iVBORw0KGg...."
        formData.append("image", realData);
      };

你有看到img.onload = render？這段是要在圖片載入完才會執行，然後你底下就直接把canvas內容處理過append給formData，可惜這時的cavnas恐怕還是空的。

既然是要上傳到imgUr，那你的formData那時再產生就好了。

原來img.onload是這個意思，可是我記得之前有試著把let dataUrl = canvas.toDataURL();放到submitFile()的開頭也抓不到，但現在卻可以了....可能那時候我腦袋被撐爆了，腦袋一團亂吧XD

感謝大大