工作示例

<!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>

js bese64转化为blob使用FormData上传的更多相关文章

  1. JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...

  2. 使用FormData上传文件、图片

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...

  3. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  4. canvas利用formdata上传到服务器

    1.首先绘制canvas图片 <canvas id="myCanvas" width="100" height="100" style ...

  5. （十）HttpClient以multipart/form-data上传文件

    原文链接:https://blog.csdn.net/wsdtq123/article/details/78888734 POST上传文件 最早的HTTP POST是不支持文件上传的,给编程开发带来很 ...

  6. FormData上传文件 带进度条

    * jQuery ajax  FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...

  7. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  8. 项目总结21：项目总结21：input实现多图上传(FormData)(上传OSS并保存数据库)

    项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库) 备注:本案例,作为Demo,包含少量的项目业务逻辑,input多图上传的逻辑是完整的: 不废话直接上代码 1-前端标 ...

  9. 使用JS实现页面中动态添加文件上传输入项

    1. 编写JSP <%@ page language="java" import="java.util.*" pageEncoding="UTF ...

随机推荐

  1. 分布式缓存 — redis

    redis是一种支持Key-Value等多种数据结构的存储系统.可用于缓存,事件发布或订阅,高速队列等场景.该数据库使用ANSI C语言编写,支持网络,提供字符串,哈希,列表,队列,集合结构直接存取, ...

  2. Web漏洞扫描-AWVS

    Web漏洞扫描-AWVS 一.AWVS概述 二.功能以及特点 三.AWVS界面 四.AWVS使用 相关优质博文: CSDN:帽子不够白:WEB渗透测试之三大漏扫神器 一.AWVS概述 Acunetix ...

  3. linux命令--ssh创建隧道

    工作应用场景 在工作中,总会连接到各种不能直接访问的环境,所以我们必须使用ssh隧道进行访问. 原理简介 ssh隧道:https://www.jianshu.com/p/20600c91e656

  4. VIT Vision Transformer | 先从PyTorch代码了解

    文章原创自:微信公众号「机器学习炼丹术」 作者:炼丹兄 联系方式:微信cyx645016617 代码来自github [前言]:看代码的时候,也许会不理解VIT中各种组件的含义,但是这个文章的目的是了 ...

  5. 图的深度优先遍历算法（DFS）

    搜索算法有很多种,本次文章主要分享图(无向图)的深度优先算法.深度优先算法(DFS)主要是应用于搜索中,早期是在爬虫中使用.其主要的思想有如下: 1.先访问一个节点v,然后标记为已被访问过2.找到第一 ...

  6. cassandra权威指南读书笔记--客户端

    DataStax驱动最成熟.默认,驱动程序会使用第一个连接的节点作为支持的版本协议.如果集群存在高低版本的节点(比如升级场景),如果驱动先连接不同不同版本的节点,可能会出现不兼容.驱动支持压缩客户端和 ...

  7. 烧录失败导致boot无法加载的解决措施,再也不怕烧成砖了

    目录: 1.usb烧录时出现的问题截图 2.重新擦除boot发现失败的情况 3.解决措施 烧录失败导致boot无法加载的解决措施在烧录系统的时候经常会遇到烧录失败的情况,如果能通过再次执行烧录能烧上肯 ...

  8. rockchip的yocto编译环境搭建

    作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:Conscience_Remains 总述   嵌入式的朋友们,应该知道Linux驱动开发过程中,需要进行搭建交叉编译工具链环境.移植u-boot ...

  9. CF-125E MST Company (单度限制最小生成树）

    参考红宝书 题目链接 对除 1 号点顶点外的点集,求一次最小生成森林,对于最小生成森林的联通分量,选择最短的一条边与 1 号点相连.设此时 1 号点的度为 \(k_0\),如果 \(k_0\lt L\ ...

  10. hdu 1166 敌兵布阵 线段树区间修改、查询、单点修改 板子题

    题目链接:敌兵布阵 题目: C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视 ...