微信小程序上传图片和文件
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 )是软件测试与分析方面最著名的国际会议之一,也是中国计算机学会…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发,后来由Pivotal Software Inc.(现为VMware子公司)接管。RabbitMQ 是一个开源的消息代理和队列服务器,用 Erlang 语言编写。广泛应用于各种分布…...
