摘要:转上传附件转文件流传入一个参数对象即可得到基于该参数对象的文本内容该属性表示目标对象的转转转使用例子
file转base64
/** * 上传附件转base64 * @param {File} file 文件流 */ export const fileByBase64 = (file, callback) => { var reader = new FileReader(); // 传入一个参数对象即可得到基于该参数对象的文本内容 reader.readAsDataURL(file); reader.onload = function (e) { // target.result 该属性表示目标对象的DataURL console.log(e.target.result); callback(e.target.result) }; }
base64转blob
/** * base64转Blob * @param {*} data */ export const base64ByBlob = (base64, callback) => { var arr = base64.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } console.log(new Blob([u8arr], { type: mime })) callback(new Blob([u8arr], { type: mime })) }
blob转url
var url = window.URL.createObjectURL(blob)
es6使用例子
fileByBase64(file, (base64) => { base64ByBlob(base64, (blob => { console.log(blob, "blob") var url = window.URL.createObjectURL(blob) console.log(url, "url") }) })
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106880.html
摘要:有时候,我们不想通过上传本地图片的方式上传图片,而是通过相机拍照,将这个拍照后的图片直接上传到服务器上,不需要保存到本地。现在我们来通过的或者方法对象对象来通过上传图片。 有时候,我们不想通过上传本地图片的方式上传图片,而是通过相机拍照,将这个拍照后的图片直接上传到服务器上,不需要保存到本地。比如,用video模拟一个摄像头,通过webrtc调用摄像头的方式拍一张照,然后通过canva...
摘要:有时候,我们不想通过上传本地图片的方式上传图片,而是通过相机拍照,将这个拍照后的图片直接上传到服务器上,不需要保存到本地。现在我们来通过的或者方法对象对象来通过上传图片。 有时候,我们不想通过上传本地图片的方式上传图片,而是通过相机拍照,将这个拍照后的图片直接上传到服务器上,不需要保存到本地。比如,用video模拟一个摄像头,通过webrtc调用摄像头的方式拍一张照,然后通过canva...
摘要:对于第二种存储方式,我们前端需要将其二进制流交由对象处理,然后通过的生成临时赋值给属性来显示。当后端返回特定的图片二进制流的时候,就像我第一里的情景再现说的,前端用容器接收。 前言 作为前端工程师 de 我们,日常少不了会跟图片打交道。在各大电商平台工作的前端工程师们,感受可能会更加的明显。 以下是我之前跟图片打交道踩到的坑,跟大家分享一下经验。 一、情景再现 用postman请求接口...
摘要:对于第二种存储方式,我们前端需要将其二进制流交由对象处理,然后通过的生成临时赋值给属性来显示。当后端返回特定的图片二进制流的时候,就像我第一里的情景再现说的,前端用容器接收。 前言 作为前端工程师 de 我们,日常少不了会跟图片打交道。在各大电商平台工作的前端工程师们,感受可能会更加的明显。 以下是我之前跟图片打交道踩到的坑,跟大家分享一下经验。 一、情景再现 用postman请求接口...
阅读 1234·2021-11-24 09:39
阅读 1459·2021-09-07 09:59
阅读 3451·2019-08-30 15:54
阅读 2449·2019-08-30 11:00
阅读 2647·2019-08-29 15:06
阅读 2123·2019-08-26 13:52
阅读 399·2019-08-26 13:24
阅读 2395·2019-08-26 12:20