圖片上傳轉base64

作的過程當中原本想用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('');
            }
        });

    };
相關文章
相關標籤/搜索