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

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.mzph.cn/news/768787.shtml

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

相关文章

springboot+vue导出excel并下载

引入easyexcel依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.3.2</version></dependency>编写接口 /*** 批量导出** param ids* return*/PostMapping("/export"…

​如何下载virtualbox的旧版本​

1. 打开VirtualBox官网&#xff1a;https://www.virtualbox.org/wiki/Download_Old_Builds 2. 在页面上找到“VirtualBox 5.2.x”或者“VirtualBox 6.0.x”等旧版本的链接&#xff0c;点击进入。 3. 在页面上找到对应操作系统的下载链接&#xff0c;点击下载。 4. 下载完成后…

Linux 进程通信:命名管道、共享内存

目录 一、命名管道 1、概念 2、特点 3、原理 4、创建 5、匿名管道与命名管道的区别 6、命名管道的打开规则 二、命名管道—实现客户端和服务器之间的通信 1、Makefile 2、comm.hpp 3、Log.hpp 4、server.cxx 5、client.cxx 运行测试&#xff1a; 三、system V…

java泛型详解

java泛型详解 目录 一、泛型类 二、泛型方法 三、类型变量限定 四、类型擦除 4.1与4.2&#xff1a;虚拟机中没有泛型 4.3&#xff1a;翻译泛型表达式 五、继承规则&#xff08;通配符的上下限&#xff09; 捕获通配符。 六、约束与局限性 大部分的泛型文章只涉及到泛…

Matlab进阶绘图第47期—气泡分组蝴蝶图

气泡分组蝴蝶图是分组蝴蝶图与气泡图的组合——在分组蝴蝶图每组柱子上方添加大小不同的气泡&#xff0c;用于表示另外一个数据变量&#xff08;如每组柱子值的和&#xff09;的大小。 本文利用自己制作的BubbleButterfly工具&#xff0c;进行气泡分组蝴蝶图的绘制&#xff0c…

Docker 入门使用说明

Docker 入门使用说明 Docker 安装 Docker 官网&#xff1a;Docker Docker 安装说明&#xff1a;Docker 安装说明 这里由于 Docker 在实时更新&#xff0c;所以每次安装 Docker 用来导入 key 的链接可能会有变化&#xff0c;这里就参考官方的安装方法即可 Docker 常用命令说…

用go实现一个任务调度类 (泛型)

用go实现一个任务调度类 &#xff08;泛型&#xff09; 源码地址&#xff1a; https://github.com/robinfoxnan/BirdTalkServer/blob/main/server/core/workmanager.go 1.概述 实现了一个简单的任务管理系统&#xff0c;允许用户定义任务和工作者&#xff0c;并将任务分配给…

ARM 用串口来实现灯的点亮

main.c #include "uart4.h"//封装延时函数void delay(int ms){int i,j;for(i0;i<ms;i){for(j0;j<2000;j){}}}int main(){led_init();uart4_init();//char buf[128];char *str;//char i;while(1){/*igetchar();putchar(i1);putchar(\n);putchar(\r);*/strgets(…

013_Linux(上传rz,下载sz,tar,zip,unzip)

目录 一、上传、下载 1、通过鼠标操作 &#xff08;1&#xff09;下载 &#xff08;2&#xff09;上传 2、通过命令操作 rz、sz &#xff08;1&#xff09;下载 sz &#xff08;2&#xff09;上传 rz 二、压缩、解压 1、tar命令 &#xff08;1&#xff09;压缩 &…

Jenkins hudson.plugins.git.GitSCM.ALLOW_LOCAL_CHECKOUT 属性设置问题

ERROR: Checkout of Git remote ‘local/path’ aborted because it references a local directory, which may be insecure. You can allow local checkouts anyway by setting the system property ‘hudson.plugins.git.GitSCM.ALLOW_LOCAL_CHECKOUT’ to true. Finished: F…

PMP考试备考——项目管理标准

项目的定义和特性 项目 是为创造独特的产品、服务或成果而进行的临时性工作。这意味着项目具有以下几个关键特征&#xff1a; 临时性&#xff1a;项目有一个明确的开始和结束日期&#xff0c;不同于持续运营的工作。独特性&#xff1a;每个项目都有其独特之处&#xff0c;即使…

QT----基于QT的人脸考勤系统ubuntu系统运行,编译开发板

目录 1 Ubantu编译opencv和seetaface库1.1 Ubantu编译opencv1.2 Ubuntu编译seetaface1.3 安装qt 2 更改代码2.1 直接运行报错/usr/bin/ld: cannot find -lGL: No such file or directory2.2 遇到报错摄像头打不开2.3 修改部分代码2.4 解决中文语音输出问题 3 尝试交叉编译rk358…

【 Mysql8.0 忘记登录密码 可以试试 】

** Mysql8.0 忘记登录密码 可以试试 ** 2024-3-21 段子手168 1、首先停止 mysql 服务 &#xff0c;WIN R 打开运行&#xff0c;输入 services.msc 回车打开服务&#xff0c;找到 mysql 服务&#xff0c;停止。 然后 WIN R 打开运行&#xff0c;输入 CMD 打开控制台终端输…

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

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

构建Pytorch虚拟环境教程

构建PyTorch虚拟环境通常涉及使用诸如Anaconda或venv等工具来管理Python环境&#xff0c;以便在一个独立的空间中安装PyTorch和其他依赖项。以下是使用Anaconda创建PyTorch虚拟环境的步骤&#xff08;适用于不同操作系统&#xff0c;包括Windows、Linux和MacOS&#xff09;&…

数据分析-Pandas数据分类的转换控制

数据分析-Pandas数据分类的转换控制 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表&am…

vue的URL和函数优化

URL优化 async…await 用于同步接收网络请求的结果 常规的代码 export async function articleGetAllService () {//发送异步请求&#xff0c;获取所有文章数据//同步等待服务器响应的结果&#xff0c;并返回&#xff0c;async,awaitreturn await axios.get(http://localhost:…

【 Vue.js 属性 | 生命周期 】

computed计算属性 规则&#xff1a; 1.用已有的属性计算不存在的属性 2.默认调用一次get() 3.简写时注意&#xff1a; 只有值不发生改变才可以是用简写&#xff08;函数&#xff09;&#xff0c;值发生改变必须使用对象&#xff0c;才可以配置set()方法 4.底层原理使用 Object.…

shell脚本入门练习(非常详细)零基础入门到精通,收藏这一篇就够了

【脚本1】打印形状 打印等腰三角形、直角三角形、倒直角三角形、菱形 #!/bin/bash \# 等腰三角形 read \-p "Please input the length: " n for i in \seq 1 $n\ do for ((j\$n;j>i;j--)) do echo \-n " " done for m in \seq 1 $i\ do…

淘宝1688京东...商品详情数据采集,按关键词搜索商品列表

淘宝、1688、京东等电商平台的商品详情数据采集以及按关键词搜索商品列表&#xff0c;通常可以通过以下几种方法实现&#xff1a; 请求示例&#xff0c;API接口接入Anzexi58 一、使用API接口 这些电商平台通常都提供开放API接口&#xff0c;允许开发者调用接口获取所需的数据…