关于微信临时文件wxfile://tmp文件如何处理,微信小程序最新获取头像和昵称

分享-2023年资深前端进阶:前端登顶之巅-最全面的前端知识点梳理总结,前端之巅

*分享一个使用比较久的🪜

技术栈:taro框架 + vue3版本

解决在微信小程序获取微信头像时控制台报错:找不着wxfile://tmp 文件路径,失败,原因如下:因为微信提供给我开发者的是一个本地的临时文件是会失效的所以存在服务器,时间失效就回显失败了;

在这里插入图片描述

1、微信小程序官方因保障用户隐私及自选项,新版本的获取用户基础信息发生变更;版本历史变迁,自 2022 年 10 月 25 日 24 时后做出相关调整;可查看微信开放平台社区;

在这里插入图片描述

1.1 获取头像的正确姿势:

头像获取的是一个临时路径,千万不要将直接获取的地址存储到数据库中;eg: wxfile://tmp,开头文件。

将 button 组件 open-type 的值设置为 chooseAvatar,当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。
从基础库2.24.4版本起,若用户上传的图片未通过安全监测,不触发bindchooseavatar 事件。

这里采用的是taro框架+taroUi + vue3 + ts 的写法;以及Taro.uploadFile进行上传临时文件

<template><buttonclass="avatar-wrapper"open-type="chooseAvatar"@chooseavatar="handleOnChooseAvatar">获取头像</button>
</template><script lang="ts" setup>
import Taro from "@tarojs/taro";// 获取头像信息
const handleOnChooseAvatar = async (e) => {const { avatarUrl } = e.detail;// 将获取的临时文件上传至公司服务器内获取对应的地址信息Taro.uploadFile({url: "https://xxx.api/file/upload",filePath: avatarUrl,name: "file",formData: {},success(res) {const data: any = JSON.parse(res.data);formFeildVal.headPortrait = data.data;},});
};
</script>
1.2 获取昵称的正确姿势:

1、因开发者工具问题或者ui组件库的问题,获取到的昵称在经过form校验会失效
2、解决input触发onchange事件,将值获取赋值在对应的输入框内部
3、还是有问题,将在真机上进行操作;

<template><nut-input:border="false"type="nickname"v-model="formFeildVal.nickname"placeholder="请输入昵称信息"@change="handleChangeInput"/>
</template><script lang="ts" setup>
import { nextTick } from "vue";// 延迟给form赋值昵称
const handleChangeInput = (e) => {nextTick(() => {formFeildVal.nickname = e.cacheTarget.value;});
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/38153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java spring cloud 企业电子招标采购系统源码:营造全面规范安全的电子招投标环境,促进招投标市场健康可持续发展 tbms

​ 项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以…

支持M1 Syncovery for mac 文件备份同步工具

Syncovery for Mac 是一款功能强大、易于使用的文件备份和同步软件&#xff0c;适用于需要备份和同步数据的个人用户和企业用户。Syncovery 提供了一个直观的用户界面&#xff0c;使用户可以轻松设置备份和同步任务。用户可以选择备份的文件类型、备份目录、备份频率等&#xf…

解读2023年上半年财报:营收净利双增长,珀莱雅离高端还有多远?

夏季炎热&#xff0c;防晒类产品的销量暴涨。根据千牛数据&#xff0c;防晒衣今年5月全网搜索人数同比增长15%&#xff0c;加购人数同比增长29.8%&#xff0c;访问人数同比增加42%。消费者狂热的防晒需求&#xff0c;孕育着巨大的商机&#xff0c;许多企业开始瞄准这一机会。而…

在Windows和MacOS环境下实现批量doc转docx,xls转xlsx

一、引言 Python中批量进行办公文档转化是常见的操作&#xff0c;在windows状态下我们可以利用changeOffice这个模块很快进行批量操作。 二、在Windows环境下的解决文案 Windows环境下&#xff0c;如何把doc转化为docx&#xff0c;xls转化为xlsx&#xff1f; 首先&#xff…

mysql三大日志—— 二进制日志binlog

binlog用于记录数据库执行的写入性操作&#xff0c;由服务层进行记录&#xff0c;通过追加的方式以二进制的形式保存在磁盘中。 binlog主要用于主从复制和数据恢复。 主从复制&#xff1a;在主机端开启binlog&#xff0c;然后将binlog发送到各个从机&#xff0c;从机存放binl…

sykwalking8.2和mysql5.7快速部署

1.SkyWalking 是什么&#xff1f; 分布式系统的应用程序性能监视工具&#xff0c;专为微服务、云原生架构和基于容器&#xff08;Docker、K8s、Mesos&#xff09;架构而设计。 提供分布式追踪、服务网格遥测分析、度量聚合和可视化一体化解决方案。 2.SkyWalking 有哪些功能…

Spring Task入门案例

Spring Task 是Spring框架提供的任务调度工具&#xff0c;可以按照约定的时间自动执行某个代码逻辑。 定位&#xff1a;定时任务框架 作用&#xff1a;定时自动执行某段Java代码 强调&#xff1a;只要是需要定时处理的场景都可以使用Spring Task 1. cron表达式 cron表达式…

Java多线程线程间的通信—wait及notify方法

线程间的相互作用 线程间的相互作用:线程之间需要一些协调通信,来共同完成一件任务。 Object类中相关的方法有两个notify方法和三个wait方法: Object (Java Platform SE 7 ) 因为wait和notify方法定义在Object类中,因此会被所有的类所继承。 这些方法都是final的,即它们…

树形dp模板

285. 没有上司的舞会 - AcWing题库 #include<iostream> #include<cstdio> #include<cstdlib> #include<string> #include<cstring> #include<cmath> #include<ctime> #include<algorithm> #include<utility> #include&…

Visual Studio 与QT ui文件

对.ui文件鼠标右键&#xff0c;然后单击 Open with…在弹出的窗口中&#xff0c;选中左侧的 Qt Designer&#xff0c;然后单击右侧的 Add 按钮&#xff0c;随后会弹出一个窗口&#xff0c;在 Program: 输入框中输入 Qt Designer 的路径&#xff0c;最后单击 OK找到 Qt Designer…

内网ip与外网ip

一、关于IP地址 我们平时直接接触最多的是内网IP。而且还可以自己手动修改ip地址。而外网ip&#xff0c;我们很少直接接触&#xff0c;都是间接接触、因为外网ip一般都是运营商管理&#xff0c;而且是全球唯一的&#xff0c;一般我们自己是无法修改的。 内网IP和外网IP是指在…

突破大模型 | Alluxio助力AI大模型训练-成功案例(一)

更多详细内容可见《Alluxio助力AI大模型训练制胜宝典》 【案例一&#xff1a;知乎】多云缓存在知乎的探索:从UnionStore到Alluxio 作者&#xff1a;胡梦宇-知乎大数据基础架构开发工程师&#xff08;内容转载自InfoQ&#xff09; 一、背景 随着云原生技术的飞速发展&#xff…

零基础看懂免费开源的Stable Diffusion

文章目录 前言Diffusion模型推理过程训练过程 Stable Diffusion模型参考 前言 前面一篇文章主要讲了扩散模型的理论基础&#xff0c;还没看过上篇的小伙伴可以点击查看&#xff1a;DDPM理论基础。这篇我们主要讲一下一经推出&#xff0c;就火爆全网的Stable Diffusion模型。St…

django中使用ajax发送请求

1、ajax简单介绍 浏览器向网站发送请求时 是以URL和表单的形式提交的post 或get 请求&#xff0c;特点是&#xff1a;页面刷新 除此之外&#xff0c;也可以基于ajax向后台发送请求&#xff08;异步&#xff09; 依赖jQuery 编写ajax代码 $.ajax({url: "发送的地址"…

filebeat多实例运行,kibana组件的基本使用

filebeat多实例运行: 1)需求 一台服务器上&#xff0c;需要运行多个filebeat实例 2)启动filebeat实例1 cat > config/11-log_tcp-to-console.yaml <<EOF filebeat.inputs: - type: log paths: - /tmp/oldboyedu-linux82/*.log # 监听TCP的参数 - type:…

centos 安装docker

1.更新你的系统: sudo yum update -y2.安装必需的软件包: Docker 需要 yum-utils, device-mapper-persistent-data 和 lvm2 软件包来运行。安装它们&#xff1a; sudo yum install -y yum-utils device-mapper-persistent-data lvm23.设置 Docker 的仓库: 使用以下命令添加 D…

关于Redis,你需要学习了解的知识

关于 Redis &#xff0c;涵盖多个方面&#xff0c;从基础概念到高级应用&#xff0c;以及最佳实践等。比如以下内容&#xff1a; 认识 Redis&#xff1a; Redis 是什么&#xff1f;它的特点和优势是什么&#xff1f;Redis 的数据结构&#xff1a;字符串、哈希、列表、集合、有序…

Kafka的下载安装以及使用

一、Kafka下载 下载地址&#xff1a;https://kafka.apache.org/downloads 二、Kafka安装 因为选择下载的是 .zip 文件&#xff0c;直接跳过安装&#xff0c;一步到位。 选择在任一磁盘创建空文件夹&#xff08;不要使用中文路径&#xff09;&#xff0c;解压之后把文件夹内容…

Redis 持久化

一、RDB 1.1 RDB持久化流程 fork子进程是阻塞的&#xff0c;如果同时开启RDB和AOF&#xff0c;默认使用AOF。 1、Redis父进程首先判断: 当前是否在执行save&#xff0c;或bgsave/bgrewriteaof (aof文件重写命令)的子进程&#xff0c;如果在执行则bgsave命令直接返回。 2、父进…

剑指offer专题2:队列和栈

用两个栈模拟队列 class CQueue {stack<int> stack1;stack<int> stack2; public:CQueue() {}void appendTail(int value) {stack1.push(value);}int deleteHead() {int val-1;if(!stack2.empty()){val stack2.top();stack2.pop();}else if(!stack1.empty()){while…