js bese64转化为blob使用FormData上传

作者：花生_TL007 | 2024-02-26 08:11:54

踩

blob添加到formdata中

原文

工作示例


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" name="" id="file" />
    <button id="send">发送js生成的图片</button>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/p5@0.7.2/lib/p5.min.js"></script>
    <script src="https://unpkg.com/p5@0.7.2/lib/addons/p5.dom.min.js"></script>
    <script>
      let canvas;
      function setup() {
        canvas = createCanvas(500, 400);
        background(0, 100, 200);
 
        fill(random(255), random(255), random(255));
        noStroke();
        ellipse(width / 2, height / 2, 40, 40);
      }
 
      // 手工上传图片
      document.getElementById('file').onchange = function(e) {
        const files = e.target.files;
        const firstFile = files[0];
 
        const data = new FormData();
        data.append('smfile', firstFile, '[anime]' + firstFile.name);
        send(data);
      };
 
      // 使用canvas保存的base64，转化为blob使用FormData上传
      document.getElementById('send').onclick = function(e) {
        const contentType = 'image/png';
        const dataURL = canvas.elt
          .toDataURL(contentType)
          .replace(/data\:image\/png\;base64\,/, '');
        const byteCharacters = atob(dataURL);
        
        // 这里使用DataView代替下面注释的Uint8Array
        let buffer = new ArrayBuffer(byteCharacters.length);
        let view = new DataView(buffer);
        for (let i = 0; i < byteCharacters.length; i++) {
          view.setUint8(i, byteCharacters.charCodeAt(i));
        }
        const blob = new Blob([buffer], {type: contentType});
 
        // const byteNumbers = new Array(byteCharacters.length);
        // for (let i = 0; i < byteCharacters.length; i++) {
        //   byteNumbers[i] = byteCharacters.charCodeAt(i);
        // }
        // const byteArray = new Uint8Array(byteNumbers);
        // const blob = new Blob([byteArray], {type: contentType});
 
        const data = new FormData();
        data.append('smfile', blob, '[anime]new.png');
        send(data);
      };
 
      function send(data) {
        axios
          .post('https://sm.ms/api/v2/upload', data)
          .then(function(response) {
            console.log(response);
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    </script>
  </body>
</html>

转载于:https://www.cnblogs.com/ajanuw/p/11588037.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/145091