微信小程序中选中手机相册图片上传到服务器的方法

思路: 实现图片上传我们需要使用chooseImguploadFile这两个api。
1. 微信小程序中的chooseImg是一个API,用于在用户相册或相机中选择图片上传。它可以让用户在小程序中选择上传图片,以便进行下一步操作,例如将其发送给朋友或将其上传到服务器。
2. 使用chooseImg API,您可以通过以下步骤实现在小程序中选择图片上传:

步骤:
1. 在wxml文件中添加一个按钮或其他可触摸元素,以触发选择图片的操作。

2. 在js文件中使用wx.chooseImage(options)函数来触发选择图片的操作。

3. 在options参数中,可以设置maximum选项以限制用户选择的图片数量,可以设置sizeType选项以限制图片的大小,可以设置sourceType选项以限制图片源(相册或相机)。

4. 选择完成后,可以使用wx.uploadFile(options)函数将图片上传到服务器。

代码:

1. wxml文件:


<button bindtap="choose_UpImage">选择图片进行上传</button>

1. js文件:


Page({choose_UpImage: function () {wx.chooseImage({count: 1, //count参数设置为1,表示选择一张图片sizeType: ['original', 'compressed'],//表示选择原图和压缩图两种尺寸的图片。sourceType: ['album', 'camera'],//album表示选择相册来源的图片、camera表示相机来源的图片success: function (res) {//通过res.tempFilePaths获取到选中图片的临时文件路径var tempFilePaths = res.tempFilePaths wx.uploadFile({url: 'https://网址.com/wave/upload/headImg',//filePath参数设置为tempFilePaths[0],表示要上传的文件路径,使0用的是选中图片的临时文件路径。filePath: tempFilePaths[0], //name参数设置为'file”,表示在服务器接收到的文件的name参数的值为filename: 'file',//表示在服务器接收到的文件的formData参数设置为user:test,formData参数的值为user:testformData: {'user': 'test'},success: function (res) {var fanhui_data = res.data 
// {"data":{"src":"statics/uploadfiles/1712036877769.jpg"},"code":0,"msg":""}console.log('上传成功,返回的整体数据========'+fanhui_data)//接受的数据  需要转化为json数据 let JsonSrc =  JSON.parse(fanhui_data)console.log("返回的整体数据进行json转换:",JsonSrc)console.log("上传成功,返回图片的路径========"+JsonSrc.data.src)},fail: function (res) {console.log('上传失败')}})}})},})

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

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

相关文章

vue项目安装下载项目包,报错Clear up some disk space and try again

npm install 报错&#xff1a; Clear up some disk space and try again 解决办法&#xff1a; npm cache clean --force npm cache clear --force && npm install --no-shrinkwrap --update-binary

常用软件架构模式优缺点及应用场景

1、分层架构模式 最常见的架构模式就是分层架构或者称为 n 层架构。大部分软件架构师、设计师和开发者都对这个架构模式非常熟悉。尽管对于层的数量和类型没有具体限制&#xff0c;但大部分分层架构主要由四层组成&#xff1a;展现层、业务层、持久层和数据库层&#xff0c;如…

Peter算法小课堂—树状数组

大家好&#xff0c;我是人见人爱&#xff0c;花见花开&#xff0c;车见车爆胎的树状数组Peter Pan&#xff0c;hhh 讲正文前&#xff0c;先来一个长文警告⚠很重要的知识点&#xff1a;L SB&#xff08;SB&#xff1f;&#xff09; LSB 怎么算呢&#xff1f; 哦……懂了&…

LeetCode-79. 单词搜索【数组 字符串 回溯 矩阵】

LeetCode-79. 单词搜索【数组 字符串 回溯 矩阵】 题目描述&#xff1a;解题思路一&#xff1a;回溯 回溯三部曲。这里比较关键的是给board做标记&#xff0c;防止之后搜索时重复访问。解题思路二&#xff1a;回溯算法 dfs,直接看代码,很容易理解。visited哈希&#xff0c;防止…

这个世界万物存在只有一种关系:博弈

$上证指数(SH000001)$ 我能给各位最大的帮助可能就是第一个从红警游戏引入了情绪周期视角的概念&#xff0c;而这个概念可以帮助很多人理解市场成为一种可能性&#xff0c;如果不理解可以重新回归游戏进行反复体验&#xff0c;你体验的足够多&#xff0c;思考的足够多&#xff…

力扣日记4.6-【动态规划篇】746. 使用最小花费爬楼梯

力扣日记&#xff1a;【动态规划篇】746. 使用最小花费爬楼梯 日期&#xff1a;2024.4.6 参考&#xff1a;代码随想录、力扣 746. 使用最小花费爬楼梯 题目描述 难度&#xff1a;简单 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用…

计算机网络——33多点访问协议

多点访问协议 多路访问链路和协议 两种类型的链路&#xff08;一个子网内部链路连接形式&#xff09; 点对点 拨号访问的PPP以太网交换机和主机之间的点对点链路 广播 传统以太网HFC上行链路802.11无线局域网 多路访问协议 单个共享的广播型链路 2个过更多结点同时传送&am…

c# 指数搜索(Exponential Search)

该搜索算法的名称可能会产生误导&#xff0c;因为它的工作时间为 O(Log n)。该名称来自于它搜索元素的方式。 给定一个已排序的数组和要 搜索的元素 x&#xff0c;找到 x 在数组中的位置。 输入&#xff1a;arr[] {10, 20, 40, 45, 55} x 45 输出&#xff1a;在索…

Aurora8b10b(1)IP核介绍并基于IP核进行设计

文章目录 前言一、IP核设置二、基于IP核进行设计2.1、设计框图2.2、aurora_8b10b_0模块2.3、aurora_8b10b_0_CLOCK_MODULE2.4、aurora_8b10b_0_SUPPORT_RESET_LOGIC2.5、aurora8b10b_channel模块2.6、IBUFDS_GTE2模块2.7、aurora_8b10b_0_gt_common_wrapper模块2.8、aurora8b10…

Element UI 消息提示 Message

1. Message 消息提示 本文使用的是 Element UI v2.5.13 Message 常用于主动操作后的反馈提示。比如&#xff1a;用于提交表单后的提示&#xff0c;成功或失败 全局方法 Element 为 Vue.prototype 添加了全局方法 $message&#xff0c;因此可以通过 Vue 实例直接调用 export …

GIS水文分析填充伪洼地学习

1 基本操作 洼地是指流域内被较高高程所包围的局部区域&#xff1b; 分为自然洼地和伪洼地&#xff1b; 自然洼地是自然界实际存在的洼地&#xff1b; 在 DEM 数据中&#xff0c;由于数据处理的误差和不合适的插值方法所产生的洼地&#xff0c;称为伪洼地&#xff1b; DEM 数据…

文件服务器之二:SAMBA服务器

文章目录 什么是SAMBASAMBA的发展历史与名称的由来SAMBA常见的应用 SAMBA服务器基础配置配置共享资源Windows挂载共享Linux挂载共享 什么是SAMBA 下图来自百度百科 SAMBA的发展历史与名称的由来 Samba是一款开源的文件共享软件&#xff0c;它基于SMB&#xff08;Server Messa…

Python-链表常用操作方法

在 Python 中&#xff0c;可以使用类来表示链表节点&#xff0c;然后通过链接节点来构建链表。以下是一些 Python 中链表的常用方法和操作&#xff1a; 定义链表节点类&#xff1a; class ListNode:def __init__(self, val0, nextNone):self.val valself.next next创建链表&a…

秒杀设计思路

目录 1. 系统前端优化 2. 应用层优化 3. 负载均衡 4. 业务层优化 5. 数据库优化 6. 缓存策略 7. 后端优化 8. 安全防护 9. 系统监控和预警 秒杀系统设计需要考虑高并发、高可用、低延迟等因素&#xff0c;以下是一些常见的设计方案&#xff1a; 1. 系统前端优化 静态…

TensorFlow Lite 在安卓开发中的应用及其关键组件研究

摘要 随着移动设备计算能力的增强和人工智能技术的发展&#xff0c;Google 推出的 TensorFlow Lite 成为了在安卓平台上实现本地机器学习模型部署的重要工具。本文旨在全面探讨 TensorFlow Lite 在安卓开发中的角色、优势与局限性&#xff0c;分析其典型应用场景&#xff0c;并…

Python环境搭建—安装PyCharm开发工具

&#x1f947;作者简介&#xff1a;CSDN内容合伙人、新星计划第三季Python赛道Top1 &#x1f525;本文已收录于Python系列专栏&#xff1a; 零基础学Python &#x1f4ac;订阅专栏后可私信博主进入Python学习交流群&#xff0c;进群可领取Python视频教程以及Python相关电子书合…

基于SpringBoot的“网上书城管理系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“网上书城管理系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构图 系统首页界面图 用户注册界面…

传输层 --- TCP (上篇)

目录 1. TCP 1.1. TCP协议段格式 1.2. TCP的两个问题 1.3. 如何理解可靠性 1.4. 理解确认应答机制 2. TCP 报头中字段的分析 2.1. 序号和确认序号 2.1.1. 序号和确认序号的初步认识 2.1.2. 如何正确理解序号和确认序号 2.2. TCP是如何做到全双工的 2.3. 16位窗口大小…

[C++初阶]初识C++(二)

建议先看完上篇&#xff1a;[C初阶]初识C(一)—————命名空间和缺省函数-CSDN博客 本篇部分代码和文案来源&#xff1a;百度文库&#xff0c;知乎&#xff0c;比特就业课 1.函数重载 自然语言中&#xff0c;一个词可以有多重含义&#xff0c;人们可以通过上下文来判断该词真…

低代码革新:软件开发的未来潜力与创新路径探索

过去的一年&#xff0c;挑战与机遇并存。人们一边忧虑市场经济下行所带来的新的增长难题、裁员危机&#xff0c;一边惊叹于AIGC、量子技术等领域不断涌现新的创新成果。 时代发生了改变&#xff0c;传统“互联网”的模式已走入尾声&#xff0c;新一轮的科技革命与产业变革正在到…