data:image data url 文件转为Blob上传后端的方法


Posted in HTML / CSS onJuly 16, 2019

一些场景,比如canvas获取的图片,或者微信开发sdk返回的图片格式是data:img格式的,我们需要上传到服务器上,那就需要进行转化。

将dataURL转成Blob

// base64 转 blob
dataURItoBlob(dataURI) {
  // convert base64/URLEncoded data component to raw binary data held in a string
  let byteString;
  if (dataURI.split(',')[0].indexOf('base64') >= 0) {
    byteString = atob(dataURI.split(',')[1]);
  } else byteString = unescape(dataURI.split(',')[1]);

  // separate out the mime component
  const mimeString = dataURI
    .split(',')[0]
    .split(':')[1]
    .split(';')[0];

  // write the bytes of the string to a typed array
  const ia = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], { type: mimeString });
},

构建Form上传表单

const blob = dataURItoBlob(imgDataUrl);
const formData = new FormData();
// formData.append('auth', state.token.auth); 可以选择性的加入一些鉴权
formData.append('file', blob);
进行数据上传,我这里使用的是axios
const params = {
   url: '/store/file',
   payload: formData
 };
 const data = await this.upload(params);

我已经对axios进行了封装

export const upload = (params) => {
  const { url, payload } = params
  return axios.post(url, payload, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(x => x.data)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 #HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 #HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 #HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 #HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 #HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 #HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 #HTML / CSS
You might like
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
php中的strpos使用示例
2014/02/27 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
Element Popover 弹出框的使用示例
2020/07/26 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
在Python中使用模块的教程
2015/04/27 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python温度转换实例分析
2018/01/17 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
生物技术研究生自荐信
2013/11/12 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
餐饮投资计划书
2014/04/25 职场文书
活动总结怎么写啊
2014/05/07 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
高质量“欢迎词”
2019/04/03 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python