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

锋哥原创的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;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

论文封面表格制作

原文参考&#xff1a;【【论文排版】论文封面完美对齐 强迫症重度患者的经验分享】https://www.bilibili.com/video/BV18f4y1p7hc?vd_source046491acdcff4b39fed20406b36a93e2 视频里up主介绍很详细。我自己也记录一下。 介绍一下如何完成论文封面信息的填写。 创建一个3列…

C++并发编程实战第2版笔记

文章目录 p19 某个线程只可以join()一次p22 只有当joinable()返回true时才能调用detach()P21 在std::thread对象析构前&#xff0c;必须明确是等待还是分离线程P25 移动语义P25 将类的成员函数设定为线程函数 p19 某个线程只可以join()一次 只要调用了join()&#xff0c;隶属于…

Vue-11、Vue计算属性

Vue计算属性是Vue实例的属性&#xff0c;用来根据已有的数据进行计算得到新的数据。计算属性的值会根据它的依赖缓存起来&#xff0c;在依赖没有发生改变时直接返回缓存的值&#xff0c;提高了性能。 计算属性的定义方式为在Vue实例中使用computed关键字&#xff0c;并将计算属…

次氯酸HClO荧光探针的结构特点-星戈瑞单品

次氯酸荧光探针是一种用于检测次氯酸盐&#xff08;ClO⁻&#xff09;存在的化合物&#xff0c;通常被设计为荧光分子&#xff0c;其荧光性质在与次氯酸反应时发生变化。这类荧光探针的设计通常考虑到以下结构特点&#xff1a; **1.含有感应基团&#xff1a;**探针分子通常包含…

推荐优秀的大学数学课程

今天在B站看 R-S积分 发现这个老师讲的不错&#xff1a;Riemann-Stieltjes Integrals_哔哩哔哩_bilibili 可以用优秀来说&#xff0c;板书也不错&#xff01;授课老师&#xff1a;吴庆堂老师&#xff08;国立交通大学&#xff0c;目前台湾阳明大学和台湾交通大学合并而成的台湾…

哔哩哔哩浏览器 AI 助手:bilibili subtitle

分享一个好用不火的浏览器插件&#xff0c;能够让我们在浏览 B 站视频的时候体验更棒。 写在前面 B 站视频时间越来越长的今天&#xff0c;在打开视频的时候&#xff0c;如果能够清晰直观的看到视频字幕&#xff0c;当我们点击带有时间轴的字幕就能够一键跳转到自己想看的视频…

轻松get压力测试指南

身为后端程序员怎么也要会一点压力测试相关的技术吧, 不然无脑上线项目万一项目火了进来大量请求时出现程序执行缓慢, 宕机等情况你肯定稳稳背锅, 而且这个时候短时间内还没办法解决, 只能使用物理扩容CPU, 内存, 更换网络等几种方式来解决问题, 妥妥的为公司增加支出好吧, 下一…

中年危机与自我成长职业女性的心理转型之路

中年危机与自我成长&#xff1a;职业女性的心理转型之路 案例&#xff1a;李女士&#xff0c;45岁&#xff0c;职业女性 李女士是一位职业女性&#xff0c;人到中年&#xff0c;她突然感到自己的生活仿佛失去了方向。她来找我咨询&#xff0c;希望能够找到一条心理转型的道路&a…

第87讲:XtraBackup备份工具的核心技术要点及全库备份、恢复案例

文章目录 1.XtraBackup备份工具的简介2.XBK备份工具的安装3.XBK备份工具的使用语法4.XBK备份前的准备5.使用XBK对全库进行备份5.1.XBK备份全库数据的语法格式5.2.使用XBK进行全库备份5.3.查看XBK备份的数据文件5.4.备份过程中生产的XBK文件 6.模拟故障案例并使用XBK恢复备份的数…

从传统部署到无服务器计算:AI应用在AWS平台上的革新与飞跃

文章目录 《快速构建AI应用–AWS无服务器AI应用实战》内容简介作者简介目录 随着人工智能技术的不断发展&#xff0c;越来越多的企业开始将人工智能应用于各个业务场景&#xff0c;以提高效率、降低成本并创造新的商业模式。然而&#xff0c;传统的人工智能解决方案往往需要大量…

数字化工厂产品推荐 带OPC UA的分布式IO模块

背景 近年来&#xff0c;为了提升在全球范围内的竞争力&#xff0c;制造企业希望自己工厂的机器之间协同性更强&#xff0c;自动化设备采集到的数据能够发挥更大的价值&#xff0c;越来越多的传统型工业制造企业开始加入数字化工厂建设的行列&#xff0c;实现智能制造。 数字化…

Linux系统操作——tcping安装与使用

目录 .一、安装 1、安装依赖 tcptraceroute和bc 2、安装tcping 3、赋予tcping执行权限 4、测试 5、tcping返回结果说明 二、使用说明&#xff08;参数&#xff09; 一、安装 1、安装依赖 tcptraceroute和bc 【 CentOS 或 RHEL】 sudo yum install -y tcptraceroute bc…

快递批量查询神器,一键自动识别快递公司并实时追踪

想象一下&#xff0c;你有一堆快递单号需要查询&#xff0c;一个个复制粘贴简直让人崩溃&#xff01;现在&#xff0c;有了我们的快递批量查询神器&#xff0c;这些烦恼全部消失&#xff01; 首先第一步&#xff0c;进入快递批量查询高手主页面之后&#xff0c;点击“高级设置…

kafka: 基础概念回顾(生产者客户端和机架感知相关内容)

一、kafka生产者客户端 在kafka体系结构中有如下几个重要的概念&#xff1a; Producer&#xff1a;生产者&#xff0c;负责生产消息并投递到kafka broker的某个的分区中Consumer&#xff1a;消费者&#xff0c;负责消费kafka若干个分区中的消息Broker&#xff1a;kafka服务节…

20240110-你是成年人了,你的精力要用来赚钱

丘吉尔曾经说过&#xff1a;从让一个人生气事情的大小&#xff0c;就能看出一个人的价值。我觉得这句话很有道理。为什么有的人动不动就生气&#xff1f;而有的人却对一些冒犯做到丝毫不在乎&#xff1f; 我们经常就一些鸡毛蒜皮的事情去计较&#xff0c;其实很多事情不值得我…

格雷希尔G65系列快速接头满足汽车减震器的气压、油压测试要求

当汽车经过不平路面时&#xff0c;汽车减震器可以抑制弹簧吸震后因反弹带来的震荡和来自路面的冲击&#xff0c;为乘客带来平稳舒适的行车体验。减震器在出厂之前&#xff0c;需要模拟汽车的真实行驶环境&#xff0c;在模拟当中需要对它们进行气压和油压的轮番测试。 客户的测试…

LLaMA-VID:突破视觉语言模型界限,精准捕捉图像精髓

模型概述 LLaMA-VID模型的主要目标是解决现有视觉语言模型在处理长时视频时遇到的挑战。这些挑战主要包括处理大量视觉特征所需的高计算资源以及信息的复杂性和冗余性。为了克服这些难题&#xff0c;LLaMA-VID采用了创新的方法&#xff0c;有效地减少了长时视频中无关紧要信息…

vue echarts折线图加背景颜色 值区域对应的右侧加上文本

mounted() {this.lineEcharts();},lineEcharts() {const option { tooltip: {trigger: axis,transitionDuration: 0 // 让toolltip紧跟鼠标&#xff0c;防止抖动},title: {text: 得分,left: 25,textStyle:{color: #333,fontSize: 12,fontWeight: 400}, },legend:…

Alphalens因子分析(2) - 低换手率因子秒杀98%的基金经理?

上一篇笔记&#xff0c;我们已经为因子分析准备好了数据。这一篇笔记&#xff0c;我们就进行因子分析。分析过程在 Alphalens 中非常简单&#xff0c;核心是读懂它的报告。 Alphalens 框架 Alphalens 的主要模块是 utils, tears, performance 和 plotting。 utils 主要功能是…

elementui dialog 回车时却刷新整个页面

到处都是坑&#xff0c;这个坑填完另一个坑还在等你。。。坑坑相连&#xff0c;坑坑不同。。。 使用el-dialog弹出一个表单&#xff0c;当我无意间敲到回车键时&#xff0c;整个页面被刷新了&#xff0c;又是一脸的懵逼。。。 经过查找文档发现解决方案为上述截图标记。。。 e…