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账号。https://www.bilibili.com/video/BV1ea4y137xf/图文投票和文字投票基本一样，就是在投票选项里面，多了一个选项图片；

					
						
									
					
						
							
								
							
						
					
				

.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

后端：

voteItemImagesFilePath: D://uniapp/voteItemImgs/

@Value("${voteItemImagesFilePath}")
private String voteItemImagesFilePath;

/**
 * 上传投票选项图片
 * @param voteItemImage
 * @return
 * @throws Exception
 */
@RequestMapping("/uploadVoteItemImage")
public Map uploadVoteItemImage(MultipartFile voteItemImage)throws Exception{
    System.out.println("filename:"+voteItemImage.getName());
    Map 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;
}