云羽网络做网站怎么样,网页设计图片尺寸,个人博客大全,淘宝优化锋哥原创的uniapp微信小程序投票系统实战#xff1a; uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…锋哥原创的uniapp微信小程序投票系统实战 uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频包括uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )、第2讲 投票项目后端架构搭建、第3讲 小程序端 TabBar搭建等UP主更多精彩视频请关注UP账号。https://www.bilibili.com/video/BV1ea4y137xf/ 文件选择上传组件 uni-file-picker 扩展组件 安装 uni-file-picker 文件选择上传 - DCloud 插件市场 日期选择器uni-datetime-picker组件 安装 uni-datetime-picker 日期选择器 - DCloud 插件市场 iconfont小图标 iconfont-阿里巴巴矢量图标库 iconfont.css font-face {font-family: iconfont; /* Project id 3888696 */src: url(//at.alicdn.com/t/c/font_3888696_rjermxmgmb.woff2?t1680049466852) format(woff2),url(//at.alicdn.com/t/c/font_3888696_rjermxmgmb.woff?t1680049466852) format(woff),url(//at.alicdn.com/t/c/font_3888696_rjermxmgmb.ttf?t1680049466852) format(truetype); }.share {font-family: iconfont;margin-left: 20rpx;font-size: 26rpx;color: blue; }.uploadImg{font-family: iconfont;font-size: 56rpx;color: #acacac; }.smallUploadImg{font-family: iconfont;font-size: 36rpx;color: #acacac; }.removeOption{font-family: iconfont;font-size: 38rpx;color: red;padding-right: 10px; }.addOption{font-family: iconfont;font-size: 38rpx;padding-right: 10px; }.chooseOption{font-family: iconfont;font-size: 26rpx; }.voteListItem{font-family: iconfont;font-size: 26rpx; }.voteManageItem{font-family: iconfont;font-size: 46rpx;color: blue;padding-bottom: 8px; } 前端代码 templateview classword_voteview classcover_imgview classtitle_tipview classcover封面图可以不上传/viewview classtip 宽高比650 × 300 /view/viewview classupload_imguni-file-picker selectselectCoverFileFunc($event):auto-uploadfalse limit1:del-iconfalse disable-preview file-mediatypeimage :imageStylescoverImageStylesview classuploadtext classuploadImg#xe727;/text/view/uni-file-picker/view/viewview classbasic_settingsview classtitle_tipview classtitle基础设置/view/viewview classsettingsview classtitleinput typetext v-modeltitle placeholder填写投票标题 placeholder-stylecolor:#bababa;font-size:16px//viewview classexplanationtextarea v-modelexplanation placeholder投票说明 (非必填) placeholder-stylecolor:#bababa;font-size:14px/textarea/view/view/viewview classvote_options_settingsview classtitle_tipview classtitle投票选项设置/view/viewview classoption_listview classoption_item v-for(item,index) in options :keyitem.idtext classremoveOption clickremoveOption(item.id)#xe618;/textinput typetext v-modelitem.name placeholder输入选项名称 placeholder-stylecolor:#bababa;font-size:14px/view/viewview classoption_add clickaddOption()text classaddOption#xe660;/texttext添加选项/text/view/viewview classvote_rules_settingsview classtitle_tipview classtitle投票规则设置/view/view view classrule_listview classrule_itemtext投票截止时间/textview uni-datetime-picker :borderfalse :clear-iconfalse v-modelvoteEndTime:startstartDate:endendDate/uni-datetime-picker/view/view/view/view/viewview classvote_btn button typeprimary clicksubmitVote发起投票/button/view /templatescriptimport {getBaseUrl, requestUtil} from ../../utils/requestUtil.jsimport {isEmpty} from ../../utils/stringUtil.jsimport {timeFormat} from ../../utils/dateUtil.jsexport default{data(){const curDatenew Date();const vvnew Date(curDate.getTime()24*60*60*1000);return{title:,explanation:,coverImageFileName:,coverImageStyles: {width:700rpx,height:400rpx,border:false},voteEndTime:timeFormat(vv),options:[{id:1,name:},{id:2,name:}]}},computed:{startDate(){return new Date();},endDate(){const curDatenew Date();const vvnew Date(curDate.getTime()24*60*60*1000*365);return vv;}},methods:{addOption:function(){var option{id:this.options[this.options.length-1].id1,name:}this.options.push(option);},removeOption:function(id){const indexthis.options.findIndex(vv.idid)this.options.splice(index,1);},selectCoverFileFunc:function(e){console.log(e.tempFilePaths[0])uni.uploadFile({header:{token:uni.getStorageSync(token)},url:getBaseUrl()/vote/uploadCoverImage,filePath:e.tempFilePaths[0],name:coverImage,success: (res) {let resultJSON.parse(res.data);if(result.code0){this.coverImageFileNameresult.coverImageFileName;}}})}}} /scriptstyle langscssimport /common/css/iconfont.css;.word_vote{padding: 20px;padding-bottom: 70px;.cover_img{.title_tip{margin-left: 10rpx;font-size: 26rpx;color: gray;display: flex;justify-content: space-between;}.upload_img{border-radius: 5px;margin-top: 20rpx;width:100%;height: 360rpx;background-color: white;display: flex;align-items: center;justify-content: center;.upload{margin: 10rpx;background-color: #f4f5f7;width:90%;height: 80%;display: flex;align-items: center;justify-content: center;}}}.basic_settings{margin-top: 20px;.title_tip{margin-left: 10rpx;font-size: 26rpx;color: gray;margin-bottom: 10px;.title{}}.settings{border-radius: 5px;background-color: white;.title{padding: 10px;input{font-size: 1.3rem;border-bottom: 1px solid #e4e4e4;padding-bottom: 15px;}}.explanation{padding: 10px;textarea{height: 100px;}}}}.vote_options_settings{margin-top: 20px;.title_tip{margin-left: 10rpx;font-size: 26rpx;color: gray;margin-bottom: 10px;.title{}}.option_list{.option_item{margin-top: 10px;border-radius: 5px;background-color: white;padding: 10px;display: flex;}}.option_add{margin-top: 10px;border-radius: 5px;background-color: white;padding: 10px;display: flex;color:blue;font-size:14px}}.vote_rules_settings{margin-top: 20px;.title_tip{margin-left: 10rpx;font-size: 26rpx;color: gray;margin-bottom: 10px;.title{}}.rule_list{border-radius: 5px;background-color: white;.rule_item{display: flex;justify-content: space-between;padding: 12px;border-bottom: 1px solid #e4e4e4;font-size: 28rpx;align-items: center;height: 45rpx;}}}}.vote_btn{height: 120rpx;width: 100%;background-color: white;position: fixed;bottom: 0;border-top: 1px solid #e4e4e4;button{margin: 10px;}} /style 后端 coverImagesFilePath: D://uniapp/coverImgs/ 封面上传 /*** 上传封面图片* param coverImage* return* throws Exception*/ RequestMapping(/uploadCoverImage) public MapString,Object uploadCoverImage(MultipartFile coverImage)throws Exception{System.out.println(filename:coverImage.getName());MapString,Object resultMapnew HashMap();if(!coverImage.isEmpty()){// 获取文件名String originalFilename coverImage.getOriginalFilename();String suffixNameoriginalFilename.substring(originalFilename.lastIndexOf(.));String newFileName DateUtil.getCurrentDateStr()suffixName;FileUtils.copyInputStreamToFile(coverImage.getInputStream(),new File(coverImagesFilePathnewFileName));resultMap.put(code,0);resultMap.put(msg,上传成功);resultMap.put(coverImageFileName,newFileName);}return resultMap; }