uniapp中h5版uni.chooseimage直接上传图片(图片路径blob:http://xxxx/xxxx)到阿里云oss上,获取图片名称并成功显示图片

最近公司要把小程序(uniapp)改为h5版本,在其中遇到了一个问题,就是用户修改logo,之前使用uniapp做的小程序,可以用路径(路径是http://ip:端口/xxx/xxx.jpg)来获取图片名,并上传,而在h5上路径(路径是blob:http://ip:端口/xxx/xxx)上就没有图片扩展名,获取最后那个也不是图片上传后的名称,最后去oss查看图片名称是有扩展名的,那最后是从另外一个属性获取图片名字的res.tempFiles[0].name(xxxxx.jpg),最后成功

在小程序上:

uni.chooseImage({
                    count: 1, //默认9
                    sizeType: [ 'compressed'], //可以指定是原图还是压缩图,默认二者都有
                    sourceType: ['album'], //从相册选择,sourceType 在H5端对应input的capture属性,设置为['album']无效,依然可以使用相机。
                    success: (res) => {
                        this.custInfo.photo=res.tempFilePaths[0];

                    }
                });

路径选择res.tempFilePaths[0](路径是http://ip:端口/xxx/xxx.jpg),截取里面的图片名称,去oss的bucketName里取图片就行

在h5上:

uni.chooseImage({
                    count: 1, //默认9
                    sizeType: [ 'compressed'], //可以指定是原图还是压缩图,默认二者都有
                    sourceType: ['album'], //从相册选择,sourceType 在H5端对应input的capture属性,设置为['album']无效,依然可以使用相机。
                    success: (res) => {
                        //h5获取图片没有扩展名,用tempFiles中可以获取
                 
                        this.custInfo.photo=res.tempFiles[0].path;
                        this.imageName = res.tempFiles[0].name;

                    }
                });

在h5上路径选择res.res.tempFiles[0].path(路径是blob:http://ip:端口/xxx/xxx),把这个路径上传oss成功,但就是不能像小程序直接截取图片名称。最后,在h5上图片名称,不是在路径上的,而是重新用另外一个属性获取图片名称(res.tempFiles[0].name)(名称:xxxx.jpg),把这个图片上传oss,以res.tempFiles[0].name来获取图片的。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值