微信小程序上传图片和文件
1.从微信里选择图片或文件上传
使用的vant的上传组件 原生用 wx.chooseMessageFile()
html
<!-- 从微信上面选择文件 --><van-uploader file-list="{{ file }}" bind:after-read="afterRead" max-count="{{3}}" deletable="{{ true }}" bind:delete="deleteAll" accept="all"><van-button custom-class="fup" square icon="plus" type="default"></van-button></van-uploader>
max-count 是限制上传图片数量 可以不设置该属性
js
// 从微信选择上传文件afterRead(e) {let that = thisconsole.log("上传的文件:", e.detail.file);wx.uploadFile({accept: "all",url: 'http://www.com/upload', // 仅为示例,非真实的接口地址filePath: e.detail.file.url,name: 'file',header: {'token': wx.getStorageSync("token"),// 请求需要token就带,不需要就删除},success(res) {console.log(res);let data = JSON.parse(res.data)data.data.name = e.detail.file.nameif (data.code == 1) {wx.showToast({icon: 'none',title: '上传成功!',duration: 2000})// 上传完成需要更新 fileListlet file = that.data.filefile.push(data.data)that.setData({file})console.log(that.data.file);} else {wx.showToast({icon: 'none',title: '上传失败!',duration: 2000})}},});},// 删除上传文件deleteAll(e) {console.log(e);let filearr = this.data.filefilearr.splice(e.detail.index, 1)this.setData({file: filearr})console.log(this.data.file);},
2.从相册选择图片上传

html
<!-- 从相册选择图片 --><view style="display: flex;justify-content: start;flex-wrap: wrap;margin-top: 20rpx;"><view wx:for="{{file}}" wx:key="{{index}}" class="img"><image src="{{item.url}}" mode="widthFix" /><view class="del" bindtap="deleteAll" data-index="{{index}}"><van-icon name="cross" /></view></view><van-button custom-class="fup" bindtap="pushimg" square icon="plus" type="default"></van-button></view>
js
// 删除上传文件deleteAll(e) {console.log(e);let filearr = this.data.filefilearr.splice(e.detail.index, 1)this.setData({file: filearr})console.log(this.data.file);},// 从相册选择图片pushimg() {let that = thiswx.chooseImage({ // 本地资源上传到服务器APIsuccess: function (e) {console.log(e);var tempFilePaths = e.tempFilePaths;wx.uploadFile({accept: "all",url: 'http://www.com/upload', // 指定服务器接口URLfilePath: tempFilePaths[0], // 本地文件路径,即选择文件返回的路径header: {'token': wx.getStorageSync("token"),// 请求需要token就带,不需要就删除},name: 'file', // 上传文件的key,后台要用到success: function (res) { //成功后的回调函数console.log(res);let data = JSON.parse(res.data)data.data.name = new Date()if (data.code == 1) {wx.showToast({icon: 'none',title: '上传成功!',duration: 2000})// 上传完成需要更新 fileListlet file = that.data.filefile.push(data.data)that.setData({file})console.log(that.data.file);} else {wx.showToast({icon: 'none',title: '上传失败!',duration: 2000})}}})}})},
less
.img {position: relative;width: 80px;margin-right: 15rpx;overflow: hidden;image {width: 100%;}.del {color: #ffffff;background-color: #000000;width: 40rpx;height: 40rpx;position: absolute;text-align: center;top: -13rpx;right: -13rpx;border-radius: 50%;z-index: 99;font-size: 20rpx;padding-top: 10rpx;padding-right: 10rpx;box-sizing: border-box;}
}
相关文章:
微信小程序上传图片和文件
1.从微信里选择图片或文件上传 使用的vant的上传组件 原生用 wx.chooseMessageFile() html <!-- 从微信上面选择文件 --><van-uploader file-list"{{ file }}" bind:after-read"afterRead" max-count"{{3}}" deletable"{{ true…...
拥抱AIGC浪潮,亚信科技将如何把握时代新增量?
去年底,由ChatGPT带起的AIGC浪潮以迅雷不及掩耳之势席卷全球。 当互联网技术的人口红利逐渐消退之际,AIGC就像打开通用人工智能大门的那把秘钥,加速开启数智化时代的到来。正如OpenAI CEO Sam Altman所言:一个全新的摩尔定律可能…...
【opencv】指定宽或高按比例缩放图片 拼接图片
指定宽或高按比例缩放图片 import cv2def resize_by_ratio(image, widthNone, heightNone, intercv2.INTER_AREA):img_new_size None(h, w) image.shape[:2] # 获得高度和宽度if width is None and height is None: # 如果输入的宽度和高度都为空return image # 直接返回原图…...
使用C#加载TOOLBLOCK
前言 因为Vpp文件类型包含了以下三种 QuickBuidJobToolBlock 不同类型的打开方式不同,需要提前知道vpp是什么类型 例如 这个TB.vpp文件是TOOLBLOCK,就不能直接在visionpro中打开(直接打开需要QuickBuid文件), 可以…...
MPAS-A原理及陆面模式的基本概念
跨尺度预测模式(The Model for Prediction Across Scales - MPAS)是由洛斯阿拉莫斯实验室和美国国家大气研究中心(NCAR)共同开发,其由3个部分组成,分别称为 MPAS-A(大气模型)、MPAS-O(海洋模型&…...
前端技术Html,Css,JavaScript,Vue3
Html 1.基本标签 <h1>最大的标题</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>最小的标题</h6><p>这是一个段落。</p> <br> (换…...
实战项目——多功能电子时钟
一,项目要求 二,理论原理 通过按键来控制状态机的状态,在将状态值传送到各个模块进行驱动,在空闲状态下,数码管显示基础时钟,基础时钟是由7个计数器组合而成,当在ADJUST状态下可以调整时间&…...
【es6】对象解构赋值
es6中对象解构赋值: 代码 let { foo: baz } { foo: rose, bar: jeck }; baz // "rose"let obj { first: tom, last: rose }; let { first: f, last: l } obj; f // tom l // roselet { foo: baz } { foo: rose, bar: jeck }中的foo:baz部分ÿ…...
腾讯云服务器CVM标准型S6详细介绍_性能测评
腾讯云服务器CVM标准型S6实例是最新一代的标准型实例,CPU采用Intel Xeon Ice Lake处理器,主频2.7GHz,睿频3.3GHz,内存采用最新 DDR4,默认网络优化,最高内网收发能力达1900万pps,最高内网带宽可支…...
时间序列预测任务下探索深度学习参数对模型预测性能的影响
时间序列相关的项目在我之前的很多博文中都有涉及,覆盖的数据领域也是比较广泛的,很多任务或者是项目中往往是搭建出来指定的模型之后就基本完成任务了,比较少去通过实验的维度去探索分析不同参数对模型性能的影响,这两天正好有时…...
React Dva项目 简单引入models中的所有JS文件
我们前面接触的 Dva项目 models目录下的文件还要一个一个引入 其实体验并不是很好 而且如果项目很大那就比较麻烦了 我们可以在 models 下创建一个 index.js 文件 编写代码如下 const context require.context("./", false, /\.js$/); export default context.key…...
ROS入门-第 1 章 ROS概述与环境搭建
目录 第 1 章 ROS概述与环境搭建 1.1 ROS简介 1.1.1 ROS概念 1.1.2 ROS设计目标 1.1.3 ROS发展历程 1.3 ROS快速体验 1.3.1 HelloWorld实现简介 1.3.2 HelloWorld(C版) 步骤 1:创建工作空间 步骤 2:创建发布者节点 步骤…...
spring之AOP简单介绍
1.AOP的概念 AOP,Aspect Oriented Programming,面向切面编程,是对面向对象编程OOP的升华。OOP是纵向对一个 事物的抽象,一个对象包括静态的属性信息,包括动态的方法信息等。而AOP是横向的对不同事物的抽象,…...
使用Spark ALS模型 + Faiss向量检索实现用户扩量实例
1、通过ALS模型实现用户/商品Embedding的效果,获得其向量表示 准备训练数据, M (U , I, R) 即 用户集U、商品集I、及评分数据R。 (1)商品集I的选择:可以根据业务目标确定商品候选集,比如TopK热度召回、或…...
Jmeter入门之digest函数 jmeter字符串连接与登录串加密应用
登录请求中加密串是由多个子串连接,再加密之后传输。 参数连接:${var1}${var2}${var3} 加密函数:__digest (函数助手里如果没有该函数,请下载最新版本的jmeter5.0) 函数助手:Options > …...
uni-app实现图片上传功能
效果 代码 <uni-forms-item name"ViolationImg" label"三违照片 :"><uni-file-picker ref"image" limit"1" title"" fileMediatype"image" :listStyles"listStyles" :value"filePathsL…...
golang协程池库tunny实践
前言 线程池大家都听过,其主要解决的是线程频繁创建销毁带来的性能影响,控制线程数量。 go协程理论上支持百万协程并发,协程创建调度的消耗极低,但毕竟也是消耗对吧。 而且协程池可以做一些额外的功能,比如限制并发&…...
Android性能优化—数据结构优化
优化数据结构是提高Android应用性能的重要一环。在Android开发中,ArrayList、LinkedList和HashMap等常用的数据结构的正确使用对APP性能的提升有着重大的影响。 一、ArrayList ArrayList内部使用的是数组,默认大小10,当数组长度不足时&…...
STL模板——vector详解
一、vector对象的定义和初始化方式 vector 中的数据类型 T 可以代表任何数据类型,如 int、string、class、vector(构建多维数组) 等,就像一个可以放下任何东西的容器,因此 vector 也常被称作容器。字符串类型 string …...
国际顶级学术会议ISSTA召开,中山大学与微众银行联合发表区块链最新研究成果
美国当地时间7月17日,软件工程领域顶级会议ISSTA 2023在西雅图正式召开。ISSTA (The 32nd ACM SIGSOFT International Symposium on Software Testing and Analysis )是软件测试与分析方面最著名的国际会议之一,也是中国计算机学会…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
CSS | transition 和 transform的用处和区别
省流总结: transform用于变换/变形,transition是动画控制器 transform 用来对元素进行变形,常见的操作如下,它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
解读《网络安全法》最新修订,把握网络安全新趋势
《网络安全法》自2017年施行以来,在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂,网络攻击、数据泄露等事件频发,现行法律已难以完全适应新的风险挑战。 2025年3月28日,国家网信办会同相关部门起草了《网络安全…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
