作的過程當中原本想用taro-ui裏的那個圖片上傳,可是樣式想自定義沒搞定,結果後來就用Taro.chooseImage了。h5模式返回的是一個blob對象,而後本身轉成base64了。微信小程序本身有方法。原來想用multipart的方式,奈何後端要求一次性要把全部的參數上送,直接上送是blob:http//xxxxx最後只好約定前端轉成base64上送了。javascript
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:java
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(''); } }); };