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)
}

data:image data url 文件上传相关推荐

php利用ajax文件上传,如何在PHP中利用AjaxForm实现一个文件上传功能
如何在PHP中利用AjaxForm实现一个文件上传功能发布时间:2020-12-18 14:52:38 来源:亿速云阅读:94 作者:Leah 如何在PHP中利用AjaxForm实现一个文件上传功 ...
Flutter dio 文件上传下载
Dio 是Flutter 网络请求的Pub包 Dio除了常用的get post 还可以文件下载上传等操作关于文件分片上传或者文件下载用到的pub 包 #文件选择file_selector: ^ ...
电脑无法上传html文件类型,HTML5 - 限制文件上传(HTML5 - Restrict file upload)
HTML5 - 限制文件上传(HTML5 - Restrict file upload) 上面的代码也允许上传.txt或任何类型的文件. 如何限制 html5中的其他文件类型 ? Above code ...
文件上传-自定义上传（修改上传文件名
bug描述:批量发券功能,上传excel文件,同名文件内容不同,最新上传会覆盖旧数据原因:公共资源接口的返回的url为日期,不带时间戳,同日期上传同名文件会覆盖之前的同名文件(同链接)内容 2.解决 ...
后台学习六---ajaxFileupload文件上传下载
这一章讲讲文件的上传下载,这里我们使用ajax的上传文件方法. ps:基于maven的springmvc框架都已经搭建好了的,如有问题,参考 : 后台学习一-spring+maven+mybatis+ ...
PHP网站设计 ---- 网盘(实现用户注册、登录，文件上传、下载、删除、查看等功能)
PHP网站设计 ---- 网盘(实现用户注册.登录,文件上传.下载.删除.查看等功能) 运行效果视频演示项目下载(在xampp/htdocs/下可以直接运行) 完整项目包.zip 功能要求当用户 ...
js实现文件上传进度条功能
开发中可能会涉及到需要展示文件上传进度条显示,方便用户知道文件的上传状态.其实进度条展示只需要拿到文件已上传的大小,和被上传文件的总大小即可.废话不多说直接上代码!! class fileUpload ...
Vue：利用Plupload插件封装文件上传组件
接上回<Plupload插件>,已经尝试将Plupload插件引入到HTML页面中,并进行参数配置,然后联合后端接口进行调试,完成了文件上传的工作.但是在Vue项目的开发中,我们更想将它封 ...
文件上传插件 bootstrap-fileinput ，后台使用的C#语言
官方教程:http://plugins.krajee.com/file-input#ajax-uploads 下载官方Demo后,引用样式和js文件,此项目是将所有的文件放在一个文件下 <bod ...

data:image data url 文件上传

data:image data url 文件上传相关推荐

最新文章

热门文章