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实现跳动的动画效果
Sep 12 HTML / CSS
使用CSS实现阅读进度条
Feb 27 HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 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静态类
2006/11/25 PHP
php获取mysql版本的几种方法小结
2008/03/25 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
python利用lxml读写xml格式的文件
2017/08/10 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Python数据库小程序源代码
2019/09/15 Python
pandas参数设置的实用小技巧
2020/08/23 Python
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
幼儿园安全检查制度
2014/01/30 职场文书
信息合作协议书
2014/10/09 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
Python软件包安装的三种常见方法
2022/07/07 Python