做的过程中本来想用taro-ui里的那个图片上传,但是样式想自定义没搞定,结果后来就用Taro.chooseImage了。h5模式返回的是一个blob对象,然后自己转成base64了。微信小程序自己有方法。原来想用multipart的方式,奈何后端要求一次性要把所有的参数上送,直接上送是blob:http//xxxxx最后只好约定前端转成base64上送了。
jsx:
<View className='flex-center real-card-container mt60' onClick={ this.uploadCard.bind(this,'fileJust') }>
<Image className='real-card-img' src={require('../../assets/images/cardR.png')}></Image>
<Text className='real-card-title'>请拍摄有人像的一面</Text>
</View>
js:
uploadCard(fileType){
let _this = this;
Taro.chooseImage({
count: 1,// 默认9
sizeType: ['original', 'compressed'],// 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'],// 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
console.log(res)
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths;
let changeObj = {};
if(fileType==='fileJust'){//正
changeObj['zhengImgOpen'] = true;
}
if(fileType==='file'){//反
changeObj['fanImgOpen'] = true;
}
let changeFile = {};
changeFile[fileType] = tempFilePaths[0];//图片地址
//图片转base64
_this.imgConvertBase64(changeFile[fileType]).then(resp=>{
let base64 = {};
base64[fileType] = resp;
_this.setState((prevState)=>({
...changeObj,
formData:{
...prevState.formData,
...base64
}
}));
});
}
})
};
imgConvertBase64 = (fileSrc)=>{
return new Promise((resolve,reject)=>{
if(Taro.getEnv()==='WEAPP'){
console.log('微信小程序');
wx.getFileSystemManager().readFile({
filePath: fileSrc, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
let base64 = 'data:image/png;base64,' + res.data;
//console.log(base64);
resolve(base64);
}
});
}else if(Taro.getEnv()==='WEB'){
console.log('h5');
fetch(fileSrc).then(data=>{
const blob = data.blob();
return blob;
}).then(blob=>{
let reader = new window.FileReader();
reader.onloadend = function() {
const base64 = reader.result;
resolve(base64);
};
reader.readAsDataURL(blob);
})
}else{
resolve('');
reject('');
}
});
};
这篇文章主要讲解通过原生js,将图片地址转换为base64格式后显示的方法,以及base64的图片数据如何转换为file文件并提交。
JavaScript对字符串/base64的编码和解码;Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍。
javascript原生的api是支持,Base64的, window.btoa方法将普通字符串转为Base64字符串,window.atob将Base64字符串转为普通字符串,它们在现代浏览器中受到广泛的支持。
在项目开发过程中,经常会有图片导出的需求,原生js实现base64图片下载实现思路:需要创建a标签,然后把base64的图片转为为blob对象,再通过URL.createObjectURL方法复制给a标签的href属性,最后添加添加事件的方法。
base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一。base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输。由于这些二进制字符在传输协议中属于控制字符,不能直接传送,所以需要转换一下
JavaScript 原生提供两个 Base64 相关的方法:btoa():任意值转为 Base64 编码,atob():Base64 编码转为原来的值。注意:这两个方法不适合非 ASCII 码的字符,会报错。
base64是用规定的64种字符来表示任意二进制数据的一种编码格式,base64编码不提供加密,只是将一种形式的数据转化为另一种形式。Base64编码使用二进制表示,字符串的每一个字符由8个字节表示
Base64 是基于 64 个可打印字符 A-Z、a-z、0-9、+、/ 来表示二进制数据的表示方法,常用于数据在网络中的传输。本篇将分别介绍其编码、解码以及实际运用。
为什么图片转成Base64编码,就可以直接内联到HTML中显示呢?为什么Base64编码后,体积会增大1/3呢?如果你对此也有疑问的话,就往下一看究竟吧。
因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于地址不对或者没有将图片
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!