文档章节

blog 上传base64图片

BryanYang
 BryanYang
发布于 2016/07/22 11:52
字数 211
阅读 29
收藏 0
'use strict';

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];
  
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    
    const byteArray = new Uint8Array(byteNumbers);
    
    byteArrays.push(byteArray);
  }
  
  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}


const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);





var oMyForm = new FormData();

oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);

//你还可以不借助HTML表单,直接向FormData对象中添加一个File对象或者一个Blob对象:
data.append("myfile", myBlob);

var oFileBody = '<a id="a"><b id="b">hey!</b></a>'; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});

oMyForm.append("webmasterfile", oBlob);

var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

 

© 著作权归作者所有

BryanYang
粉丝 16
博文 165
码字总数 52036
作品 0
石景山
程序员
私信 提问
加载中

评论(0)

图片上传的两种形式

很早以前的单应用项目上传图片都是很简单的,上传图片后在controller层设置路径并且保存到服务器的某个路径下就行了,数据库中存储路径地址,最后在tomcat中设置一个虚拟路径就行了,很多年以...

风间影月
2017/03/13
0
0
用Vue来实现图片上传多种方式

项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来。 没有业务场景的功能都是耍流氓,那么我们先来模拟...

huangjincq
2018/07/17
0
0
Base64数据传输过程中被修改问题(+)

这两天在写h5页面,主要功能是剪切图片,上传到服务器,我使用了ajax,将剪切后的canvas通过toDataURL()方法进行base64转码后发送给服务器,但发现在服务器端接收到的数据无法转换成图片。...

tyronejw
2016/08/23
25
0
HTML5 实现手机拍照上传

背景:移动端H5项目,需要实现调用手机拍照,并将图片压缩上传功能。 页面样式: 上传图片有原生的方法<input type="file" accept="image/*">,如果只想要拍照上传,不希望用户选择图片上传,...

Reya滴水心
2016/06/24
2.4W
23
base64图上上传保存到服务器

使用$.post提交表格时,图片是无法上传的(除非用编辑器插件什么的,那些都比较大)。这是一个新思路,图片转base64编码,提交上去,当然,图片不能太大,超过上传限制是不行的。 出处...

oneboi
2016/08/18
16
0

没有更多内容

加载失败,请刷新页面

加载更多

一款提升IT运维工作效率的工具,你值得拥有!

IT运维的工作内容主要是负责服务器硬件配置、独立主机或虚拟化产品的开通维护、服务器日常运行监控和管理等,具体的要看企业对这个岗位的要求。 而像运维这样的岗位,我个人是推荐可以使用一...

欢乐马在开源
17分钟前
44
0
IDEA 多线程Debug

一、问题描述 在idea中的进行调试时,代码中有多线程,想对线程中的代码进行跟踪,代码如下: for (int i = 0; i < 5; i++) { final int index = i; exec...

Airship
22分钟前
19
0
jenkins 插件加速

参考:https://my.oschina.net/VASKS/blog/3106314 主要是自己创建一个nginx, 让jenkins从清华源下载。 以下是创建nginx的Dockerfile Dockerfile FROM nginxADD nginx.conf /etc/nginx/ngi......

杰仪
22分钟前
29
0
五分钟自学编程:怎样才能学好笔试面试最爱考察的算法

原创声明 本文作者:黄小斜 转载请务必在文章开头注明出处和作者。 本文思维导图 什么是算法 上回我们有一篇文章,讲述了作为一个新人程序员,如何学习数据结构这门课程,其实呢,数据结构和...

黄小斜
26分钟前
24
0
面试题 11:旋转数组的最小数字

题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素。 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋...

Oaki
32分钟前
50
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部