圖片上傳轉base64
阿新 • • 發佈：2019-09-12
做的過程中本來想用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('');
}
});
};