最近移动端界面给后台传数据时用到Blob,它可以看做是存放二进制数据的容器;

//上传图片数据封装
function uploadPhotoData(data,fileName){
var imgArray = new Array();
if(data == null || data == ""){
return null;
}
var img = {
fileName: encodeURI(fileName, "UTF-8"),
fileStr: data
};
imgArray[0] = img;
var blob = new Blob([JSON.stringify(imgArray).toString()], {
type: 'text/plain'
});
return blob;
}

其中encodeURI(fileName, "UTF-8")是将fileName转码为UTF-8,防止乱码;JSON.stringify(imgArray).toString()是将imgArray数组转化为json字符串。

前端Blob对象的使用的更多相关文章

  1. 【前端知乎系列】ArrayBuffer 和 Blob 对象

    本文首发在 个人博客 更多丰富的前端学习资料,可以查看我的 Github: <Leo-JavaScript>,内容涵盖数据结构与算法.HTTP.Hybrid.面试题.React.Angul ...

  2. 前端H5中JS用FileReader对象读取blob对象二进制数据,文件传输

    HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...

  3. 搞懂前端二进制系列(一):🍇 认识Blob对象

    参考资料: https://juejin.cn/post/6844904183661854727 [你不知道的Blob] https://juejin.cn/post/6844904144453517 ...

  4. [HTML5] Blob对象

    写在前面 本篇主要总结Blob对象属性及作用,通过DEMO介绍Blob对象的应用场景. Blob对象 一直以来,JS都没有比较好的可以直接处理二进制的方法.而Blob的存在,允许我们可以通过JS直接操 ...

  5. mybatis存取blob对象+@Cacheable实现数据缓存

    参考文档: http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/ 需求场景: 当前业务通过第三方接口查询一个业务数据, ...

  6. Vue通过Blob对象实现导出Excel功能

    不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Exc ...

  7. JavaScript 中 Blob对象的初步认识

    Blob Binary Large Object的缩写,二进制大对象 虽然在前端中开发并不常见,但是实际上MySql数据库中,可以通过设置一个Blob类型的数据来存储一个Blob对象的内容 语法 le ...

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

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

  9. JS 之Blob 对象类型

    原文 http://blog.csdn.net/oscar999/article/details/36373183 什么是Blob? Blob 是什么? 这里说的是一种Javascript的对象类型. ...

随机推荐

  1. 线性回归 Linear regression(4) 局部加权回归

    这篇文章将介绍过拟合和欠拟合的概念,并且介绍局部加权回归算法. 过拟合和欠拟合 之前在线性回归中,我们总是将单独的x作为我们的特征,但其实我们可以考虑将,甚至x的更高次作为我们的特征,那么我们通过线性 ...

  2. DataBinder.Eval的正确使用

    本文介绍下,asp.net编程中有关DataBinder.Eval的用法,学习下asp.net DataBinder.Eval的用法,有需要的朋友参考下. 代码示例 :<%# Bind(&quo ...

  3. lapis docker 运行说明

    1. lapis docker 镜像制作 因为openresty 新版本一个json 库的问题,我们使用的是 openresty:1.11.2.1 基础镜像 FROM openresty/openre ...

  4. 搭建Spring Cloud+Dubbo

    公司要测试一下zipkin是否可以跟踪全流程,项目的架构比较复杂,不要问我为什么,基本架构如下:前端门户,调用spring cloud组件,spring cloud在调用dubbo,这样一套流程.于是 ...

  5. 嵌入式无法使用QAudioDeviceInfo类

    修改: 1.修改pro文件 增加    QT += multimedia 2.修改Makefile文件,LIBS = $(SUBLIBS)  -L/opt/qt-4.8.5/lib -lQtMulti ...

  6. bzoj 1257 [CQOI2007]余数之和——数论分块

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1257 \( n\%i = n - \left \lfloor n/i \right \rfl ...

  7. myeclipse部署maven项目到tomcat,src/main/resources里面配置文件部署不到webapp下classes

    解决myeclipse部署maven时,src/main/resources里面配置文件加载不到webapp下classes路径下的问题. 有时候是src/main/resources下面的,有时候是 ...

  8. 本地oracle的配置连接

    oraclediver_name=oracle.jdbc.driver.OracleDriverurl=jdbc:oracle:thin:@205.168.1.125:1521:orclusernam ...

  9. mac下的安装神奇 brew --例子 安装 mysql

    da打开终端 输入bre 输入 bre search mysql (查找mysql版本) 输入 bre install mysql@5.6(选择mysql版本安装)

  10. TCP之二:TCP的三次握手与四次分手

    一.TCP是什么? 具体的关于TCP是什么,我不打算详细的说了:当你看到这篇文章时,我想你也知道TCP的概念了,想要更深入的了解TCP的工作,我们就继续.它只是一个超级麻烦的协议,而它又是互联网的基础 ...