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

黎明寄波澜*

于 2023-08-11 18:57:59 发布

阅读量282

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_55209970/article/details/132238440

版权

文章描述了如何在JavaScript中使用formDataAPI，将HTMLDOM中的图片转换为Base64编码，然后作为Blob对象附加到FormData中，以便通过CORS跨域上传到服务器接口的过程。

摘要由CSDN通过智能技术生成

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

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