今天小编跟大家讲解下有关图片上传转base64 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关图片上传转base64 的相关资料，希望小伙伴们看了有所帮助。
做的过程中本来想用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(''); } }); };来源：爱蒂网
