data:image data url 文件上传

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

// base64 转 blob
dataURItoBlob(dataURI) {// convert base64/URLEncoded data component to raw binary data held in a stringlet byteString;if (dataURI.split(',')[0].indexOf('base64') >= 0) {byteString = atob(dataURI.split(',')[1]);} else byteString = unescape(dataURI.split(',')[1]);// separate out the mime componentconst mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];// write the bytes of the string to a typed arrayconst ia = new Uint8Array(byteString.length);for (let i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}return new Blob([ia], { type: mimeString });
},

2、构建Form上传表单

const blob = dataURItoBlob(imgDataUrl);
const formData = new FormData();
// formData.append('auth', state.token.auth); 可以选择性的加入一些鉴权
formData.append('file', blob);

3、进行数据上传,我这里使用的是axios

 const params = {url: '/store/file',payload: formData};const data = await this.upload(params);

我已经对axios进行了封装

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416104.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于Loadrunner 错误解决

录制脚本时&#xff0c;总会出现一些莫名其妙的错误&#xff0c;下面总结了一些&#xff1a; 1、[MsgId: MESG-26388] 错误解决方法&#xff1a; Action.c(29): web_submit_form("UserLogin.action") highest severity level was "ERROR", 172503 body b…

[HNOI 2001]求正整数

Description 对于任意输入的正整数n&#xff0c;请编程求出具有n个不同因子的最小正整数m。例如&#xff1a;n4&#xff0c;则m6&#xff0c;因为6有4个不同整数因子1&#xff0c;2&#xff0c;3&#xff0c;6&#xff1b;而且是最小的有4个因子的整数。 Input n&#xff08;1≤…

APP支付报错ALI40247解决方案

APP支付交易参数验证不通过&#xff0c;请在SDK返回的result中查看具体的错误信息sub_code、sub_msg等&#xff08;如有返回&#xff09;&#xff0c;同时可在 公共返回码 列表中找到对应的解决方案。 参考检查方向&#xff1a; 1、检查APPID对应的支付宝账号是否有App支付接口…

微信 wx.chooseImage 上传图片 的思考

开发微信上传图片功能&#xff0c;我的想法是选择图片后&#xff0c;不调用wx.uploadImage上传到微信后台&#xff0c;而是自己组织一下&#xff0c;直接上传到阿里云OSS&#xff0c;因为看到了官方文档到说明localId可以作为img标签的src属性显示图片。 wx.chooseImage({coun…

发布服务器 bugzilla, streber 数据库备份方案

发布服务器 bugzilla, streber 数据库备份方案 Bugzilla, Streber 目前均使用 MySQL 数据库。备份的方法是将两个库导出为 sql 脚本&#xff0c;然后压缩为 zip 文件&#xff0c;按日期保存在 d:/backup/mysql 目录下。利用 Windows 的 计划任务 启动备份&#xff0c;每天备份一…

(转载)控制反转(IoC)与依赖注入(DI)

http://zhangjunhd.blog.51cto.com/113473/126530/转载于:https://www.cnblogs.com/eecs2016/articles/7417091.html

微信 开发 图片 上传 阿里云 oss 服务器

在做微信开发时&#xff0c;我需要将图片上传至阿里云OSS&#xff0c;思路是服务端下载微信图片再转存至OSS。 wx.chooseImage({count: 1, // 默认9sizeType: [original, compressed],sourceType: [album, camera],success: function (res) {var localIds res.localIds;wx.up…

教你创建自己的CSDN博客专栏

首先说明一下 专栏创建标准&#xff1a; 1. 申请者的CSDN个人博客中原创技术性博客文章要多于15篇。 2. 申请专栏主题明确&#xff0c;简介翔实清晰&#xff0c;并且与IT技术相关首先进入博客专栏&#xff1a;https://blog.csdn.net/column.html&#xff0c;点击我的专栏跳转预…

开发服务器 VSS开发库 自动备份方案

开发服务器 VSS开发库 自动备份方案 vss开发库每天备份一次&#xff0c;脚本如下:from F:/backup/dev_vss_backup.bat set src_dirf:/dev_vssset dest_file%date:~0,4%%date:~5,2%%date:~8,2%set dest_dirdev_vss;if exist %dest_dir% goto do_itmkdir %dest_dir%;:do_itzip -r…

工作95视频上传逻辑

定好是前端直接把视频传到他们的服务器&#xff0c;还是先到我 们的后端暂存&#xff0c;提交的时候在存到他们那边

JAVA 成员访问权限修饰符

修饰符 类内部 package内 子类 其他 public 允许 允许 允许 允许 protected 允许 允许 允许 不允许 default 允许 允许 …

微信 网页开发 获取地理位置 高德地图显示

1、微信中获取地理位置经纬度 wx.getLocation({type: wgs84, // 默认为wgs84的gps坐标&#xff0c;如果要返回直接给openLocation用的火星坐标&#xff0c;可传入gcj02success: function (res) {const latitude res.latitude // 纬度&#xff0c;浮点数&#xff0c;范围为90 ~…

支付宝异步通知验签失败解决方案

原贴地址&#xff1a;https://openclub.alipay.com/read.php?tid1598&fid69&#xff0c;欢迎大家访问 说明&#xff1a; 验签只需要使用到支付宝公钥 &#xff0c;而不是使用应用公钥&#xff01;错误原因&#xff1a; 1.支付宝公钥使用错误导致 2.验签方法使用错误 3.…

工作96:当前页面拿id

reject(){putAction("/order/"this.ListId"/status",{status:-1,remark:""}).then(res>{this.$message({message: 审核撤回状态修改,type: success});this.close();})},/*审核通过的方法 定义在混入里面*/approve(){/*控制审核状态成功*/putA…

使用ftp上传文件到Unix系统注意事项

使用ftp上传文件到Unix系统注意事项 在使用FTP客户端上传文件到Unix系统时&#xff0c;应该注意将传输模式设置为二进制&#xff08;Binary&#xff09;传输模式&#xff0c;否则有可能造成传输到Unix系统的文件与实际文件大小不一致&#xff0c;文件无法使用。

度度熊回家

一个数轴上共有N个点&#xff0c;第一个点的坐标是度度熊现在位置&#xff0c;第N-1个点是度度熊的家。现在他需要依次的从0号坐标走到N-1号坐标。但是除了0号坐标和N-1号坐标&#xff0c;他可以在其余的N-2个坐标中选出一个点&#xff0c;并直接将这个点忽略掉&#xff0c;问度…

微信地图 leaflet 腾讯地图

本来在微信项目中使用的高德地图&#xff0c;发现不是想象中的好用&#xff0c;而且用了微信&#xff0c;感觉使用腾讯地图会比较方便&#xff0c;所以&#xff0c;索性使用leaflet腾讯地图的底图来实现。 其中关于正确使用腾讯地图参考了https://github.com/wuxiashuangji/TX…

支付宝会员卡开卡表单模板配置(alipay.marketing.card.formtemplate.set)JAVA版本demo

官方接口文档&#xff1a; https://docs.open.alipay.com/251/105668/ &#xff0c;我这里写的是开卡组件前两步的操作流程&#xff0c; 仅供参考1. 调用接口前的准备工作(创建应用等)参考该文档 &#xff1a;https://docs.open.alipay.com/251/105731/2.核心代码&#xff0c;这…