uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -创建图文投票实现

news2025/1/13 13:10:01

锋哥原创的uniapp微信小程序投票系统实战:

uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )、第2讲 投票项目后端架构搭建、第3讲 小程序端 TabBar搭建等,UP主更多精彩视频,请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1ea4y137xf/图文投票和文字投票基本一样,就是在投票选项里面,多了一个选项图片;

<view class="option_item" v-for="(item,index) in options" :key="item.id">
					<view class="option_input">
						<text class="removeOption" @click="removeOption(item.id)">&#xe618;</text><input type="text" v-model="item.name" placeholder="输入选项名称" placeholder-style="color:#bababa;font-size:14px">
					</view>				
					<view class="option_upload">
						<uni-file-picker
						@select="selectVoteItemFileFunc($event,index)"
						:auto-upload="false" 
						limit="1"
						:del-icon="false" 
						disable-preview 
						file-mediatype="image" 
						:imageStyles="voteItemImageStyles">
							<view class="upload">
								<text class="smallUploadImg">&#xe727;</text>
							</view>
						</uni-file-picker>
					</view>
				</view>
.option_item{
					margin-top: 10px;
					border-radius: 5px;
					background-color: white;
					padding: 10px;
					.option_input{
						display: flex;
					}
					.option_upload{
						margin-top: 20rpx;
						.upload{
							margin: 10rpx;
							background-color: #f4f5f7;
							width:90rpx;
							height: 90rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			voteItemImageStyles:{
				width:"150rpx",
				height:"120rpx",
				border:false
			},
selectVoteItemFileFunc:function(e,index){
				console.log("index="+index)
				console.log(e.tempFilePaths[0])
				uni.uploadFile({
					header:{token:uni.getStorageSync("token")},
					url:getBaseUrl()+"/vote/uploadVoteItemImage",
					filePath:e.tempFilePaths[0],
					name:"voteItemImage",
					success: (res) => {
						let result=JSON.parse(res.data);
						if(result.code==0){
							this.options[index].image=result.voteItemImageFileName;
						}
					}
				})
			},

加个image属性:

提交加上验证:

// 验证投票选项,如果有名称的,必须要上传图片
				for(var i=0;i<this.options.length;i++){
					var option=this.options[i];
					if(!isEmpty(option.name)){
						if(isEmpty(option.image)){
							console.log("请上传第"+(i+1)+"个投票选项图片")
							uni.showToast({
								icon:"error",
								title:"请上传第"+(i+1)+"个投票选项图片"
							})
							return;
						}
					}
				}

后端:

voteItemImagesFilePath: D://uniapp/voteItemImgs/
@Value("${voteItemImagesFilePath}")
private String voteItemImagesFilePath;
/**
 * 上传投票选项图片
 * @param voteItemImage
 * @return
 * @throws Exception
 */
@RequestMapping("/uploadVoteItemImage")
public Map<String,Object> uploadVoteItemImage(MultipartFile voteItemImage)throws Exception{
    System.out.println("filename:"+voteItemImage.getName());
    Map<String,Object> resultMap=new HashMap<>();
    if(!voteItemImage.isEmpty()){
        // 获取文件名
        String originalFilename = voteItemImage.getOriginalFilename();
        String suffixName=originalFilename.substring(originalFilename.lastIndexOf("."));
        String newFileName= DateUtil.getCurrentDateStr()+suffixName;
        FileUtils.copyInputStreamToFile(voteItemImage.getInputStream(),new File(voteItemImagesFilePath+newFileName));
        resultMap.put("code",0);
        resultMap.put("msg","上传成功");
        resultMap.put("voteItemImageFileName",newFileName);
    }
    return resultMap;
}

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

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

相关文章

【海康威视】场景中遇到的那些问题

文章目录 问题一&#xff1a;DOM 遮挡问题描述解决 问题二&#xff1a;切换过快时&#xff0c;页面出现白块解决 前言&#xff1a;在使用 海康威视 插件进行做视频接入时&#xff0c;出现的一些奇奇怪怪的问题&#xff0c;今天整理一下吧&#xff01;&#xff01;&#xff01; …

Kubernetes-准入控制

一. 准入控制 Webhook 官方demo 默认准时控制器 NamespaceLifecycleLimitRangerServiceAccountTaintNodesByConditionPriorityDefaultTolerationSecondsDefaultStorageClassStorageObjectInUseProtectionPersistentVolumeClaimResizeRuntimeClassCertificateApprovalCertifica…

若依项目的table列表中对每一个字段增加排序按钮(单体版和前后端分离版)

一、目标&#xff1a;每一个字段都添加上下箭头用来排序 只需要更改前端代码&#xff0c;不需要更改后端代码&#xff0c;后面会讲解原理 二、单体版实现方式&#xff1a; 1.在options中添加sortable:true 2.在需要排序的字段中添加sortable:true 三、前后端分离版 1.el-tab…

RHCE9学习指南 第17章 进程管理

17.1 进程介绍 在Windows下打开任务管理器就可以查看到系统所有进程&#xff0c;如图17-1所示。 图17-1 Windows下的任务管理器 这里列出了系统中所有的进程。不过也可以使用命令行工具来查看进程。每个进程都会有一个process ID&#xff0c;简称为pid。 17.2 查看进程 也可…

使用numpy处理图片——镜像翻转和旋转

在《使用numpy处理图片——基础操作》一文中&#xff0c;我们介绍了如何使用numpy修改图片的透明度。本文我们将介绍镜像翻转和旋转。 镜像翻转 上下翻转 from PIL import Image import numpy as np img Image.open(example.png) data np.array(img)# axis0 is vertical, a…

B端产品经理学习-权限管理

目录 权限管理的原则 常见的权限管理模型 总结 对企业而言&#xff0c;最重要的一个资源就是有价值的专有信息&#xff0c;也就是自己知道&#xff0c;而其他企业不知道的信息&#xff0c;因此&#xff0c;专有信息是企业的重要竞争力&#xff0c;权限管理的价值体现在专有信…

Spring基于注解的AOP控制事务

首先在.xml中开启sprong对注解事务的支持 applicationContext.xml <tx:annotation-driven transaction-manager"transactionManager"/> 然后再Service中加上注解 service Service Transactional(readOnlytrue,propagation Propagation.SUPPORTS) public cl…

【Java集合篇】HashMap的remove方法是如何实现的?

HashMap的remove方法是如何实现的 ✔️典型解析✔️拓展知识仓✔️HashMap的remove方法的注意事项✔️HashMap的remove方法的参数类型✔️ 删除键和值的参数类型有什么区别✔️删除键值对的场景是什么 ✔️HashMap remove方法是阻塞队列的吗✔️HashMap remove方法是线程安全的…

行为型设计模式——模板方法模式

学习难度&#xff1a;⭐ &#xff0c;比较常用 模板方法模式 在面向对象程序设计过程中&#xff0c;程序员常常会遇到这种情况&#xff1a;设计一个系统时知道了算法所需的关键步骤&#xff0c;而且确定了这些步骤的执行顺序&#xff0c;但某些步骤的具体实现还未知&#xff0…

前端面试题集合七(ES6、ES7、ES8、ES9、ES10、ES11、ES12)

ES6&#xff08;2015&#xff09; 1. 类&#xff08;class&#xff09; class Man {constructor(name) {this.name 小豪;}console() {console.log(this.name);} } const man new Man(小豪); man.console(); // 小豪 2. 模块化(ES Module) // 模块 A 导出一个方法 export …

@FunctionalSpringBootTest 和@SpringBootTest注解的区别

FunctionalSpringBootTest 和 SpringBootTest 是Spring框架中用于测试的两个不同注解。下面是它们之间的主要区别&#xff1a; 用途和范围&#xff1a; SpringBootTest&#xff1a;这个注解用于需要测试Spring应用程序上下文的场合。它会加载完整的应用程序上下文&#xff0c;适…

AI教我学编程之C#入门程序详解与拓展

与AI肩并肩 前言一、一个简单的C#程序补充说明对话AI 二、标识符三、关键字四、Main五、空白1. 缩进2. 代码块的间距3. 操作符的空格4. 换行5. 一致性 六、语句七、从程序输出文本主题&#xff1a;从程序中输出文本1. Write 和 WriteLine 方法2. 格式字符串3. 多重标记和值4. 格…

阿里云国际服务器设置安全防护程序

阿里云云服务器&#xff08;ECS&#xff09;提供弹性、安全、高性能、高性价比的虚拟云服务器&#xff0c;满足您的所有需求。立即在这里免费注册&#xff01; 常见 Web 应用程序 请勿对 Web 服务控制台&#xff08;如 WDCP、TOMCAT、Apache、Nginx、Jekins、PHPMyAdmin、Web…

浅谈有源滤波在某棉纺企业低压配电室节能应用

叶根胜 安科瑞电气股份有限公司 上海嘉定 201801 0引言 在电力系统中&#xff0c;谐波的根本原因是非线性负载。由于电子设备、变频器、整流器等。在棉纺企业的大部分设备中被广泛使用&#xff0c;因此会产生大量的谐波电流。我公司的环锭纱线和筒车间的配电设备受到谐波的影…

【C语言】time.h——主要函数介绍(附有几个小项目)

time.h是C标准函数库中获取时间与日期、对时间与日期数据操作及格式化的头文件。返回值类型 size_t&#xff1a;适合保存sizeof的结果&#xff0c;类型为unsigned int&#xff08;%u&#xff09;clock_t&#xff1a;适合存储处理器时间的类型&#xff0c;一般为unsigned long&…

day 43动态规划(5)

day 43 代码随想录 2024.1.10 发烧中。。。简单过一遍等二刷DP问题&#xff01;&#xff08;最近赶一篇paper&#xff01;&#xff09; 1. 1049最后一块石头的重量 dp[j]表示容量&#xff08;这里说容量更形象&#xff0c;其实就是重量&#xff09;为j的背包&#xff0c;最多…

51单片机介绍

1 单片机简介 单片机&#xff0c;英文Micro Controller Unit&#xff0c;简称MCU 内部集成了CPU、RAM、ROM、定时器、中断系统、通讯接口等一系列电脑的常用硬件功能 单片机的任务是信息采集&#xff08;依靠传感器&#xff09;、处理&#xff08;依靠CPU&#xff09;和硬件设…

基于JavaWeb+BS架构+SpringBoot+Vue校园一卡通系统的设计和实现

基于JavaWebBS架构SpringBootVue校园一卡通系统的设计和实现 文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 文末获取源码 Lun文目录 第一章 概述 4 1.1 研究背景 4 1.2研究目的及意义 4 1.3国内外发展现状 4 1…

DePIN:重塑物理资源网络的未来

点击查看TechubNews更多相关推荐 一、DePIN&#xff1a;物理资源的新整合方式 Depin赛道的项目如雨后春笋般涌现&#xff0c;为市场注入了新的活力。作为先行者&#xff0c;Coinmanlabs已经深入布局Depin赛道&#xff0c;其中最引人注目的项目当属Grass。 什么是DePIN DePIN…

Java项目:114SSM图书管理系统

博主主页&#xff1a;Java旅途 简介&#xff1a;分享计算机知识、学习路线、系统源码及教程 文末获取源码 一、项目介绍 图书管理系统基于SpringSpringMVCMybatis开发&#xff0c;系统主要实现了图书馆借书还书功能&#xff0c;系统分为管理员和读者两种角色。 管理员功能如下…