在使用formData传输图片数据时，遇到的问题

一开始以为传的是二进制  后来才发现 不行  传输接口报错  经实验 发现得需要转一下

以下是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("图片元素不存在！");
      }