当前位置: 首页 > news >正文

微信小程序单图上传和多图上传

图片上传主要用到

1、wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照。

参数

Object object

属性类型默认值必填说明
countnumber9最多可以选择的图片张数
sizeTypeArray.<string>['original', 'compressed']所选的图片的尺寸
sourceTypeArray.<string>['album', 'camera']选择图片的来源
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.sizeType 的合法值

说明最低版本
original原图
compressed压缩图

object.sourceType 的合法值

说明最低版本
album从相册选图
camera使用相机
object.success 回调函数
参数
Object res
属性类型说明最低版本
tempFilePathsArray.<string>图片的本地临时文件路径列表
tempFilesArray.<Object>图片的本地临时文件列表1.2.0

res.tempFiles 的结构

属性类型说明
pathstring本地临时文件路径
sizenumber本地临时文件大小,单位 B
wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success (res) {// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFilePaths}
})

2、wx.uploadFile(Object object)

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。

参数

Object object

属性类型默认值必填说明
urlstring开发者服务器地址
filePathstring要上传文件资源的路径
namestring文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容
headerObjectHTTP 请求 Header,Header 中不能设置 Referer
formDataObjectHTTP 请求中其他额外的 form data
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
object.success 回调函数
参数
Object res
属性类型说明
datastring开发者服务器返回的数据
statusCodenumber开发者服务器返回的 HTTP 状态码

返回值

UploadTask

基础库 1.4.0 开始支持,低版本需做兼容处理。

一个可以监听上传进度进度变化的事件和取消上传的对象

示例代码

wx.chooseImage({success (res) {const tempFilePaths = res.tempFilePathswx.uploadFile({url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址filePath: tempFilePaths[0],name: 'file',formData: {'user': 'test'},success (res){const data = res.data//do something}})}
})

小程序案例:

image.png

.wxml 文件:

<view>
<button bindtap='photo' type='warn' style='width:50%; margin:50rpx auto'>选择图片</button>
</view>

.js 文件

(1)单图上传

  photo: function (e) {wx.chooseImage({count: 1,  //默认上传个数sizeType: ['original', 'compressed'],sourceType: ['album'],success(res) {// tempFilePath可以作为img标签的src属性显示图片var albumPaths = res.tempFilePaths[0]console.log('图片地址名称' + albumPaths);wx.uploadFile({url: app.appUrl + 'img',filePath: albumPaths,name: 'img',formData: {'nickName': '123',//其他参数'openid': 'xxssdazcs5gxxxaa',//其他参数},success(res) {console.log(res)}})}})},

(2)多图上传(相比单图上传,多了个for遍历)

  photo: function (e) {wx.chooseImage({count: 3,//默认上传个数sizeType: ['original', 'compressed'],sourceType: ['album'],success(res) {// tempFilePath可以作为img标签的src属性显示图片var albumPaths = res.tempFilePathsfor (var i = 0; i < albumPaths.length; i++) {console.log('图片地址名称' + albumPaths[i]);wx.uploadFile({url: app.appUrl + 'img',filePath: albumPaths[i],name: 'img',formData: {'nickName': '123',//其他参数'openid': 'xxssdazcs5gxxxaa',//其他参数},success(res) {console.log(res)}})}}})},

后端代码:

public function img(){$file = request()->file('img');$info = $file->move(ROOT_PATH . 'public' . DS . 'static/uploads/ceshi');
}

image.png

相关文章:

微信小程序单图上传和多图上传

图片上传主要用到 1、wx.chooseImage(Object object) 从本地相册选择图片或使用相机拍照。 参数 Object object 属性类型默认值必填说明countnumber9否最多可以选择的图片张数sizeTypeArray.<string>[original, compressed]否所选的图片的尺寸sourceTypeArray.<s…...

github入门基础操作

GitHub是一个基于Git版本控制系统的代码托管平台&#xff0c;它提供了一个方便的平台&#xff0c;让开发者可以在上面存储、管理和分享代码。如果你是一个开发者&#xff0c;那么学习如何使用GitHub是非常重要的&#xff0c;因为它可以帮助你更好地管理你的代码和协作开发。 在…...

Android Studio(3.6.2版本)安装 java2smali 插件,java2smali 插件的使用方法简述

一、Android Studio&#xff08;3.6.2版本&#xff09;安装 java2smali 插件 1、左上角File—>Setting&#xff0c;如下图 2、Setting界面中&#xff1a;点击Plugins—>选择右侧上方Marketplace—>搜索栏输入java2smali&#xff0c;如下图 3、点击Install按钮—>点…...

vscode使用remote ssh到server上 - Node进程吃满CPU

起因&#xff1a;Node进程吃满CPU 分析 我发现每次使用vscode的remote插件登陆到server后&#xff0c;就会出现node进程&#xff0c;不太清楚干什么用的&#xff0c;但是绝对和它有关。 查找原因 首先找到了这篇文章&#xff0c;解决了rg进程的问题&#xff1a; https://blo…...

如何在Go中使用日期和时间

引言 软件的设计是为了让工作更容易完成,对许多人来说,这包括与日期和时间进行交互。日期和时间值在现代软件中无处不在。例如,跟踪汽车何时需要服务并让车主知道,跟踪数据库中的变化以创建审计日志,或者只是比较一个时间和另一个时间来确定一个过程花费了多长时间。因此…...

2023_Spark_实验二十九:Flume配置KafkaSink

实验目的&#xff1a;掌握Flume采集数据发送到Kafka的方法 实验方法&#xff1a;通过配置Flume的KafkaSink采集数据到Kafka中 实验步骤&#xff1a; 一、明确日志采集方式 一般Flume采集日志source有两种方式&#xff1a; 1.Exec类型的Source 可以将命令产生的输出作为源&…...

Koa.js 入门手册:洋葱模型插件机制详解以及常用中间件

前言 Nodejs 提供了 http 能力&#xff0c;我们通过如下代码可以快速创建一个http server服务 const http require(http);http.createServer((req, res) > {res.write(hello\n);res.end();}).listen(3000);使用nodejs提供的原生能力启动一个http server并不麻烦&#xff…...

零信任 SASE 办公安全解决方案:提升企业网络安全与灵活性

​零信任 SASE&#xff08;Secure Access Service Edge&#xff09;办公安全解决方案为企业带来了许多好处&#xff0c;相较于以前的解决方案有明显差异。这个方案的出现是为了应对企业面临的新的网络安全挑战和远程办公的需求。 1、统一的网络安全管理&#xff1a;SASE 将网络…...

【提示工程】Chain-of-Thought Prompting Elicits Reasoning in Large Language Models

解决问题 探索大语言模型解决推理问题的能力。从头训练或微调模型&#xff0c;需要创建大量的高质量含中间步骤的数据集&#xff0c;成本过大。 相关工作 1、使用中间步骤来解决推理问题 &#xff08;1&#xff09;使用自然语言通过一系列中间步骤解决数学应用题 &#xff0…...

AWS解决方案架构师学习与备考

系列文章目录 送书第一期 《用户画像&#xff1a;平台构建与业务实践》 送书活动之抽奖工具的打造 《获取博客评论用户抽取幸运中奖者》 送书第二期 《Spring Cloud Alibaba核心技术与实战案例》 送书第三期 《深入浅出Java虚拟机》 送书第四期 《AI时代项目经理成长之道》 …...

如何搭建企业管理系统Odoo并远程访问管理界面【内网穿透】

文章目录 前言1. 下载安装Odoo&#xff1a;2. 实现公网访问Odoo本地系统&#xff1a;3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件&#xff0c;是一个一站式全功能ERP及电商平台。 开源性质&#xff1a;Odoo是一个开源的ERP软件&#xff0c;这意味着企…...

【Git】git常用问题汇总

1. gitlab如何打tag gitlab打tag的目的 git作为代码管理工具已经使用的越来越多了。而且一般开发人员在Dev分支下进行开发。但是当代码需要发布到测试环境时&#xff0c;需要将代码先合并到master&#xff0c;然后打个tag &#xff0c;类似于SVN中tag处理。这样便于后期代码向…...

2024免费mac苹果电脑系统电脑管家CleanMyMac X

macOS已经成为最受欢迎的桌面操作系统之一&#xff0c;它提供了直观、简洁的用户界面&#xff0c;使用户可以轻松使用和管理系统。macOS拥有丰富的应用程序生态系统&#xff1b;还可以与其他苹果产品和服务紧密协作&#xff0c;如iPhone、iPad&#xff0c;用户可以通过iCloud同…...

ElasticSearch详细搭建以及常见错误high disk watermark [ES系列] - 第497篇

导读 历史文章&#xff08;文章累计490&#xff09; 《国内最全的Spring Boot系列之一》 《国内最全的Spring Boot系列之二》 《国内最全的Spring Boot系列之三》 《国内最全的Spring Boot系列之四》 《国内最全的Spring Boot系列之五》 《国内最全的Spring Boot系列之六…...

ADB:获取坐标

命令&#xff1a; adb shell getevent | grep -e "0035" -e "0036" adb shell getevent -l | grep -e "0035" -e "0036" 这一条正确&#xff0c;但是&#xff0c;grep给过滤了&#xff0c;导致没有输出 getevent -c 10 //输出10条信息…...

关于“Python”的核心知识点整理大全27

目录 10.5 小结 第&#xff11;1 章 测试代码 11.1 测试函数 name_function.py 函数get_formatted_name()将名和姓合并成姓名&#xff0c;在名和姓之间加上一个空格&#xff0c;并将它们的 首字母都大写&#xff0c;再返回结果。为核实get_formatted_name()像期望的那样工…...

实验三 MapReduce编程

实验目的&#xff1a; 1.掌握MapReduce的基本编程流程&#xff1b; 2.掌握MapReduce序列化的使用&#xff1b; 实验内容&#xff1a; 一、在本地创建名为MapReduceTest的Maven工程&#xff0c;在pom.xml中引入相关依赖包&#xff0c;配置log4j.properties文件&#xff0c;搭…...

element组件库的日期选择器如何限制?

本次项目中涉及到根据日期查找出来的数据进行调整,所以修改的数据必须是查找范围内的数据.需要对调整数据的日期进行限制,效果如下: 首先我们使用了element 组件库的日期选择器,其中灌完介绍, picker-options中函数disabledDate可以设置禁用状态,代码如下: <el-date-pickerv…...

QSqlQueryModel

QSqlQueryModel 是 Qt 框架中的一个模型类&#xff0c;用于在 Qt 的视图组件&#xff08;如 QTableView、QListView&#xff09;中显示数据库查询结果。 QSqlQueryModel 继承自 QAbstractTableModel&#xff0c;它通过执行 SQL 查询并将结果存储在内部数据结构中&#xff0c;提…...

docker-compose介绍和用法

docker-compose介绍和用法详解 1、docker-compose介绍2、docker-compose build3、docker-compose down4、docker-compose up -d 1、docker-compose介绍 Docker Compose是一个用于快速配置多个Docker容器的工具。它是一个定义和运行多容器的Docker应用工具&#xff0c;通过YAML…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...