文档章节

图片上传转base64

 阿K1225
发布于 09/11 20:41
字数 458
阅读 12
收藏 0

做的过程中本来想用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('');
            }
        });

    };

 

© 著作权归作者所有

粉丝 5
博文 139
码字总数 32030
作品 0
浦东
私信 提问
用Vue来实现图片上传多种方式

项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来。 没有业务场景的功能都是耍流氓,那么我们先来模拟...

huangjincq
2018/07/17
0
0
前端图片canvas,file,blob,DataURL等格式转换

最近用到一些图片相关的操作,记录一下笔记。 将file转化成base64 场景: 获取到一个file类型的图片,如果直接在html中预览?这里就是利用html5的新特性,将图片转换为Base64的形式显示出来。...

fengxianqi
2018/07/25
0
0
base64图上上传保存到服务器

使用$.post提交表格时,图片是无法上传的(除非用编辑器插件什么的,那些都比较大)。这是一个新思路,图片转base64编码,提交上去,当然,图片不能太大,超过上传限制是不行的。 出处...

oneboi
2016/08/18
12
0
Java将base64字符串转成byte[]时的异常

前几天在做项目,有一个功能是关于图片上传的. 前端把图片转化成base64字符串,传给后端(后端是JAVA),然后后端再讲base64的字符串转化成byte[]之后存储文件. 我用NodeJS写测试脚本上传的时候一...

Solid
2015/11/20
224
0
TinyMCE编辑器图片上传扩展(base64方式),asp.net mvc5

编辑器上传图片一般都是先上传到服务器中,若是用户取消或忘记提交表单就产生一张废图在空间里面,时间一长就产生大量占用空间的无用图片,现在就试试提交前先用base64,提交后,在后台处理编...

无迹影
09/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
37分钟前
2
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
38分钟前
4
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
46分钟前
4
1
正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置

正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置 今天要用正则表达式实现匹配一个词出现一次或者不出现的情况,但是又不仅仅是这么简单的需求。先详细说下我这种情况吧,也许有...

Airship
52分钟前
6
0
第八讲:asp.net C# web 读取文件

本讲主要讲解如何在asp.net页面上传文件。 首先,前台页面: 其次,后台页面: 结果: 1、前台效果: 2、后台结果:

刘日辉
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部