微信小程序 webview 中的h5 页面 van-uploader 部分机型无法上传 解决方案

本文主要是介绍微信小程序 webview 中的h5 页面 van-uploader 部分机型无法上传 解决方案,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 20220704更

jssdk chooseImage安卓手机无法唤起相机或相册?微信版本8.0.24 | 微信开放社区

调用chooseImage无法唤起相机或相册。经过多方测试,发现只有安卓微信8.0.24是这样。
 

微信官网解决方案:

请使用wx.chooseMedia(Object object)   wx.chooseMedia(Object object) | 微信开放文档

8.0.23版本更新后

小程序webview组件内嵌h5的时候上传文件调用出问题? | 微信开放社区1.小程序webview组件使用vant ui上传方法是多文件上传图片时出现直接跳转到图片选择界面,没有跳转到文件选择界面2.因为直接跳转图片选择界面导致小程序多图片上传在部分安卓机上出现bug,文件上传无法再次调用的情况3.同样的操作同样的方法在微信内置浏览器打开链接时会弹出拍照和从相册选择的弹窗。4.请问小程序的webview组件方法是否在监听到了多图图片上传时直接执行了跳转方法,没有唤起弹窗,与小程序内核浏览器方法存在差异5.下图是微信内核浏览器调用多图上传时弹出的弹窗,但是在小程序的webview组件中没有弹出,并且直接跳转图片文件选择界面,导致部分安卓机型出现无法上传图片的情况https://developers.weixin.qq.com/community/develop/doc/0004e8f0368cf09c6bfd21f3556000

微信更新8.0.22版本后,在微信小程序 webview 中的h5 页面 van-uploader 部分机型无法正常上传,在非小程序打开无此类问题。

解决方案:

1、去除  multiple  可单张上传    缺点:不可多选
2、用jssdk的wx.chooseImage (注:企业微信不支持)缺点:h5页面要在微信打开,浏览器无法上传

wxConfig(result) {let _this = this;let timestamp = result.timestamp;let noncestr = result.nonceStr;let signature = result.signature;let appId = result.appId;wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。//                                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: appId, // 必填,公众号的唯一标识timestamp: timestamp, // 必填,生成签名的时间戳nonceStr: noncestr, // 必填,生成签名的随机串signature: signature, // 必填,签名,见附录1jsApiList: ["chooseImage","getLocalImgData",] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2});wx.ready(function () {setSessionStorage('wxready', true);console.log("微信已加载完毕!");});wx.error(function (res) {});
}

使用修改代码量最少的方法

<van-uploader v-model="picture.other" @delete="deleteImg" :show-upload="false"accept="image/*">
</van-uploader>
<span class="imgUpload" @click="chooseImage">+</span>chooseImage(index, type) {let _this = this;wx.chooseImage({count: 9, // 默认9sizeType: ['original',], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {let localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片_this.wxImgData(localIds, type)}});},wxImgData(item, type) {let localId = item.pop();let _this = this;let params = new FormData();wx.getLocalImgData({localId: localId, // 图片的localIDsuccess: function (res) {let localData = res.localData; // localData是图片的base64数据,可以用img标签显示if (localData.indexOf('data:image') != 0) {//判断是否有这样的头部localData = 'data:image/jpeg;base64,' + localData;}localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg'); // 此处的localData 就是你所需要的base64位let file = _this.dataURLtoFile(localData);params.append("request", file);//接口上传upLoad(params).then(response => {if (response.code == '0') {Dialog.alert({title: '提示',message: response.message || '上传失败,请重新上传'});} else {if (item.length > 0) {//多张重复上传_this.wxImgData(item, type)} else {}}})}})},dataURLtoFile(dataurl, filename = 'weixin.jpg') {var arr = dataurl.split(','),//mime = arr[0].match(/:(.*?);/)[1],mime = "image/jpeg",bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type: mime});},.imgUpload {font-size: 20px;position: relative;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;flex-direction: column;-webkit-box-align: center;-webkit-align-items: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;box-sizing: border-box;width: 2.133333rem;height: 2.133333rem;margin: 0 .213333rem .213333rem 0;background-color: #f7f8fa;
}



        

这篇关于微信小程序 webview 中的h5 页面 van-uploader 部分机型无法上传 解决方案的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/815874

相关文章

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

三国地理揭秘:为何北伐之路如此艰难,为何诸葛亮无法攻克陇右小城?

俗话说:天时不如地利,不是随便说说,诸葛亮六出祁山,连关中陇右的几座小城都攻不下来,行军山高路险,无法携带和建造攻城器械,是最难的,所以在汉中,无论从哪一方进攻,防守方都是一夫当关,万夫莫开;再加上千里运粮,根本不需要打,司马懿只需要坚守城池拼消耗就能不战而屈人之兵。 另一边,洛阳的虎牢关,一旦突破,洛阳就无险可守,这样的进军路线,才是顺势而为的用兵之道。 读历史的时候我们常常看到某一方势

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

poj 2976 分数规划二分贪心(部分对总体的贡献度) poj 3111

poj 2976: 题意: 在n场考试中,每场考试共有b题,答对的题目有a题。 允许去掉k场考试,求能达到的最高正确率是多少。 解析: 假设已知准确率为x,则每场考试对于准确率的贡献值为: a - b * x,将贡献值大的排序排在前面舍弃掉后k个。 然后二分x就行了。 代码: #include <iostream>#include <cstdio>#incl

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中,不同电脑的配置和操作系统(如Win11与Win7)可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行,需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下,使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此,在开发程序时,尽量使用

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 (最大值之和)给定整数序列 a0,⋯,an−1,求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr(其中0≤l≤r<n0≤l≤r<n)表示,对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同,当且仅当下标不同。 例如,当原序列为 [1,2,1,2] 时,要计算子序列 [

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-