微信小程序实现多张照片上传

hello hello~ ,这里是 code袁~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

在这里插入图片描述
💥个人主页:code袁
💥 所属专栏:Java

微信小程序实现多张照片上传

1.功能实现

当选择图片后,生成对象tempFilePaths文件路径。在通过for循环依次的图片的src上传到服务器。当服务器的状态码为200且图片上传完毕后将图片的src转化为Json字符串存在数组中以便将其添加到数据库

2.代码实现

1.mp-uploader

<view class="page"><view class="page__bd"><mp-cells><mp-cell><mp-uploader select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="4" title="附件上传" tips="最多可上传4张照片"></mp-uploader></mp-cell></mp-cells></view>
</view>
//data中this.setData({ selectFile: this.selectFile.bind(this),uplaodFile: this.uplaodFile.bind(this)})
 uplaodFile(files) {console.log('upload files', files)console.log('upload files', files)// 文件上传的函数,返回一个promisereturn new Promise((resolve, reject) => {const tempFilePaths = files.tempFilePaths;//上传返回值const that = this;const object = {};for (var i = 0; i < tempFilePaths.length; i++) {let filePath = tempFilePaths[i]wx.uploadFile({filePath: filePath,name: 'file',url: 'http://localhost:3000/upload/upload',success: function(res){console.log('444',res.statusCode)if (res.statusCode=== 200 ) {const url = JSON.parse(res.data).urlthat.data.files.push(url)if (that.data.files.length === tempFilePaths.length) {object.urls = that.data.files;resolve(object)  //这就是判断是不是最后一张已经上传了,用来返回,}} else {reject('error')}}})}})// 文件上传的函数,返回一个promise},

在这里插入图片描述
在这里插入图片描述

2.chooseImage

<view>
<block wx:for="{{images}}" wx:for-item="src"><image  src="{{src}}"></image>           
</block>
<view bindtap="upload">上传</view>
upload(){let that = this;wx.chooseImage({//异步方法count: 9,//最多选择图片数量sizeType: ['original', 'compressed'],//选择的图片尺寸 原图,压缩图sourceType: ['album', 'camera'],//相册选图,相机拍照success(res) {//tempFilePaths可以作为图片标签src属性const tempFilePaths = res.tempFilePathsconsole.log("选择成功", res)for (let i = 0; i < tempFilePaths.length; i++) {//多个图片的循环上传wx.cloud.uploadFile({//上传至微信云存储cloudPath: 'myImage/' + new Date().getTime() + "_" + Math.floor(Math.random() * 1000) + ".jpg",//使用时间戳加随机数作为上传至云端的图片名称filePath: tempFilePaths[i],// 本地文件路径success: res => {// 返回文件 IDconsole.log("上传成功", res.fileID)that.setData({images: res.fileID//获取上传云端的图片在页面上显示})wx.showToast({title: '上传成功',})}})}}})
}
3.页面展示

图片的src在数据库中是以字符串的形式存储。当需要展示时我们只需要将字符串转化为数组对象即可
原始数据 “http://localhost:3000/images/17112466754606371.jpg”,“http://localhost:3000/images/17112466755133666.jpg”,“http://localhost:3000/images/17112466756494564.jpg”]

 getShare().then(res=>{const list=res.datalist.forEach(obj => {console.log('8888',obj.img)const imgString = obj.img;const trimmedString = imgString.replace('["', '').replace('\"]', '');const imgArray = trimmedString.split('"\,\"');console.log('444',imgArray)obj.img = imgArray;})this.setData({shareList:list})})

在这里插入图片描述

🎉写在最后

🍻伙伴们,如果你已经看到了这里,觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦!手动码字,如有错误,欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~

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

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

相关文章

第一篇:概述、 目录、适用范围及术语 --- IAB/MRC《增强现实(AR)广告(效果)测量指南1.0 》

第一篇&#xff1a;概述、目录、适用范围及术语 - IAB与MRC及《增强现实广告效果测量指南1.0》 --- 我为什么要翻译美国IAB科技公司系列标准 ​​​​​​​​​​​​​​ 翻译计划 第一篇概述—IAB与MRC及《增强现实广告效果测量指南》之目录、适用范围及术语第二篇广告效…

6.3 BP神经网络

在多层感知器被引入的同时&#xff0c;也引入了一个新的问题&#xff1a;由于隐藏层的预期输出并没有在训练样例中给出&#xff0c;隐藏层结点的误差无法像单层感知器那样直接计算得到。 为了解决这个问题&#xff0c;反向传播&#xff08;BP&#xff09;算法被引入&#xff0…

推荐一种Bean注入方式——开发经验

我们都知道三种Bean注入的方式分别是属性注入&#xff0c;setter方法注入&#xff0c;构造器注入。这三种Bean注入的方式各有优缺点&#xff0c;但是相对来说更推荐使用构造器注入的方式。 1、构造器注入的优缺点 优点&#xff1a; 1、可以注入不可变对象 因为构造方法注入是…

Redis技术学习|实战项目记录|商户缓存

学习资料声明 黑马程序员的Redis学习视频&#xff1a;黑马程序员Redis入门到实战教程 需要用到的知识&#xff1a;linux&#xff08;推荐韩顺平老师的教程&#xff0c;学到p30&#xff0c;创建好虚拟机和简单的几个命令就好。&#xff09;SSM。SpringBoot。 还用到了MybatisPl…

mac 解决随机出现的蓝色框

macbookair为什么打字的时候按空格键会出现蓝色框? - 知乎

c#矩阵求逆

目录 一、矩阵求逆的数学方法 1、伴随矩阵法 2、初等变换法 3、分块矩阵法 4、定义法 二、矩阵求逆C#代码 1、伴随矩阵法求指定3*3阶数矩阵的逆矩阵 &#xff08;1&#xff09;伴随矩阵数学方法 &#xff08;2&#xff09;代码 &#xff08;3&#xff09;计算 2、对…

橘子疾病检测4种YOLOV8

橘子检测YOLOV8&#xff0c;检测4种疾病&#xff0c;采用YOLOV8-NANO&#xff0c;训练得到PT模型转换成ONNX&#xff0c;最后OPENCV调用&#xff0c;支持C/PYTHON/ANDROID 橘子检测YOLOV8&#xff0c;检测4种疾病

阿里云4核16G服务器优惠价格26元1个月、149元半年

阿里云4核16G服务器优惠价格26.52元1个月、79.56元3个月、149.00元半年。2024年腾讯云服务器优惠价格表&#xff0c;一张表整理阿里云服务器最新报价&#xff0c;阿里云服务器网整理云服务器ECS和轻量应用服务器详细CPU内存、公网带宽和系统盘详细配置报价单&#xff0c;大家也…

Ubuntu18.04桌面版设置静态IP地址

引用: Ubuntu配置静态IP_ubuntu配置静态ip地址-CSDN博客 正文 默认Unbuntu 18.04 Desktop桌面版使用 netplan 管理网卡网络地址。使用Unbuntu 18.04 桌面版配置&#xff0c;可以通过桌面上的设置图标配置网卡的静态IP地址。 点击桌面右上角下拉框&#xff0c;点击“设置”按…

206.反转链表

刷算法题&#xff1a; 第一遍&#xff1a;1.看5分钟&#xff0c;没思路看题解 2.通过题解改进自己的解法&#xff0c;并且要写每行的注释以及自己的思路。 3.思考自己做到了题解的哪一步&#xff0c;下次怎么才能做对(总结方法) 4.整理到自己的自媒体平台。 5.再刷重复的类…

yolov5训练并生成rknn模型部署在RK3588开发板上,实现NPU加速推理

简介 RK3588是瑞芯微&#xff08;Rockchip&#xff09;公司推出的一款高性能、低功耗的集成电路芯片。它采用了先进的28纳米工艺技术&#xff0c;并配备了八核心的ARM Cortex-A76和Cortex-A55处理器&#xff0c;以及ARM Mali-G76 GPU。该芯片支持多种接口和功能&#xff0c;适…

Python Flask 将数据传递给前端

from flask import Flask, render_templateapp Flask(__name__)app.route("/index") def index():data {name: "张三","age": 18,}return render_template("index2.html", datadata)if __name__ __main__:app.run()<!DOCTYPE ht…

【python 装饰器 - 重试】做一个简易重试装饰器,如果函数执行错误则会自动重新执行,可设置重试次数,对爬虫比较友好

文章日期&#xff1a;2024.03.19 使用工具&#xff1a;Python 类型&#xff1a;装饰器 文章全程已做去敏处理&#xff01;&#xff01;&#xff01; 【需要做的可联系我】 AES解密处理&#xff08;直接解密即可&#xff09;&#xff08;crypto-js.js 标准算法&#xff09;&…

js教程(8)

一、事件流 1.概述 在JavaScript中&#xff0c;事件流描述的是事件在DOM结构中传播和被处理的顺序。事件流分为冒泡阶段和捕获阶段。 冒泡阶段&#xff08;Bubbling Phase&#xff09;&#xff1a;事件首先从最内层的元素开始向父级元素传播&#xff0c;一直传播到最外层的元素…

【MySQL】复合查询——基本单表查询、多表查询、自连接、子查询、使用from进行子查询、合并查询

文章目录 MySQL复合查询1. 基本单表查询2. 多表查询3. 自连接4. 子查询4.1 单行子查询4.2 多行子查询4.3 多列子查询4.4 使用from进行子查询 5. 合并查询5.1 union5.2 union all MySQL 复合查询 数据库的复合查询是指在一个查询中结合使用多个查询条件或查询子句&#xff0c;以…

Linux信号补充——信号发送和保存

三、信号的发送与保存 3.1信号的发送 ​ 必须有操作系统来保存信号&#xff0c;因为他是管理者&#xff1b; ​ 信号给进程的task_struct发送信号&#xff0c;在task_struct中维护了一个整数signal有0-31位&#xff0c;共32个bit位&#xff1b;对于信号的管理使用的是位图结…

面试算法-88-反转链表

题目 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 解 class Solution {public ListNode reverseList(ListNode head) {if(head null || hea…

动态规划Dynamic Programming

上篇文章我们简单入门了动态规划&#xff08;一般都是简单的上楼梯&#xff0c;分析数据等问题&#xff09;点我跳转&#xff0c;今天给大家带来的是路径问题&#xff0c;相对于上一篇在一维中摸爬滚打&#xff0c;这次就要上升到二维解决问题&#xff0c;但都用的是动态规划思…

关于项目管理的一些思考

1. 概述 1.1 背景 本文是《项目管理知识体系指南&#xff08;PMBOK指南&#xff09;》的读书笔记&#xff0c;并结合软件开发项目过程的一些经验对项目管理进行总结。 1.2 读完本文你可以获得什么&#xff1f; PMBOK 学习笔记。 关于软件项目管理的一些思考和经验。 2. 什…

【网络基础】VRRP虚拟路由冗余协议介绍与配置

目录 一、VRRP的概述 1.1 VRRP的由来 1.2 作用 1.3 基本结构 1.4 状态机流程 1.5 设备类型 二、 实例演示 一、VRRP的概述 1.1 VRRP的由来 局域网中的用户终端通常采用配置一个默认网关的形式访问外部网络&#xff0c;如果此时默认网关设备发生故障&#xff0c;将中断…