Bei der Verwendung von formData zur Übertragung von Bilddaten sind Probleme aufgetreten

Zuerst dachte ich, die Übertragung sei binär, aber später stellte ich fest, dass es nicht funktionierte. Die Übertragungsschnittstelle meldete einen Fehler. Nach Experimenten stellte ich fest, dass es übertragen werden musste.

Das Folgende ist ein Beispiel für die Übertragung von Bildern durch formData

let htmlDom = document.getElementById("result"); // 你要图片的元素，可以直接是img
      if (htmlDom) {
        const canvas = await html2canvas(htmlDom, {
          useCORS: true,
        });
        const imgUrl = canvas.toDataURL("image/jpeg", 1.0);

        const str = imgUrl.split(";base64,")[1];
        const formData = new FormData();
        formData.append("playerId", playerID);
        formData.append("title", "来测试下，好准啊!");

        // 将Base64字符串转换为Blob对象
        const byteCharacters = atob(str);
        const byteArrays = [];
        for (let i = 0; i < byteCharacters.length; i++) {
          byteArrays.push(byteCharacters.charCodeAt(i));
        }
        const blob = new Blob([new Uint8Array(byteArrays)], {
          type: "image/jpeg",
        });

        // 将Blob对象作为文件添加到FormData中
        formData.append("files", blob, "filename.jpg");
        formData.append("filesType", "1");

        // console.log(JSON.stringify(formData), "formData");
        axios
          .post(
            "你的接口",
            formData,
            {
              headers: {
                "Content-Type": "multipart/form-data",
                Authorization: auth,
                // logintoken: loginToken,
                loginToken: loginToken,
                // Logintoken: loginToken,
              },
            }
          )
          .then((res) => {
            console.log(JSON.stringify(res), "res");
          })
          .catch((err) => {
            console.log(JSON.stringify(err), "err");
          });
      } else {
        console.log("图片元素不存在！");
      }