js取el中的map值及js replaceAll实现

本文介绍了一种在JavaScript中通过将Map对象转换为JSON字符串的方法来动态获取Map中的值。这种方法克服了直接使用模板字符串获取值的问题,并提供了一个简单的解决方案。
<%

Map map = new HashMap();
map.put("20",0);
map.put("21",1);
request.setAttribute("map",map);

%>

js中不能直接如下取值
var key = "21";
alert("${map[" + key + "]}");//想直接实现这种取值效果,不行


下面通过转成json来实现

<script type="text/javascript">
String.prototype.replaceAll = function(s1,s2) {
return this.replace(new RegExp(s1,"gm"),s2);
}

var str = "${map}";
str = str.replaceAll("=",":");


var map = eval("(" + str + ")");
alert(map[key]);


</script>
package com.neu.activity.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.util.HashMap; import java.util.Map; import java.util.UUID; @Controller("activityVideoUpload") @CrossOrigin(origins = "http://localhost:8080", maxAge = 3600) public class VideoUpload { // 后端固定存储路径,可根据实际需求调整 private static final String SAVE_PATH = "D:/video/videoUpload"; @PostMapping(value = "/upload/uploadVideo") @ResponseBody public Map<String, String> savaVideotest(@RequestParam("file") MultipartFile file) throws IllegalStateException { Map<String, String> resultMap = new HashMap<>(); try { // 获文件后缀,前端已做格式限定,此处辅助校验 String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1) .toLowerCase(); // 重构文件名称,避免重名 String pikId = UUID.randomUUID().toString().replaceAll("-", ""); String newVideoName = pikId + "." + fileExt; System.out.println("重构后的文件名:" + newVideoName); // 确保存储目录存在,不存在则创建 File saveDir = new File(SAVE_PATH); if (!saveDir.exists()) { boolean isCreated = saveDir.mkdirs(); System.out.println("存储目录创建结果:" + isCreated); } // 保存视频文件 File fileSave = new File(SAVE_PATH, newVideoName); file.transferTo(fileSave); // 构造返回结果 resultMap.put("newVideoName", newVideoName); resultMap.put("resCode", "200"); resultMap.put("VideoUrl", SAVE_PATH + "/" + newVideoName); return resultMap; } catch (Exception e) { e.printStackTrace(); resultMap.put("resCode", "400"); return resultMap; } } }<template> <el-container class="activity-container"> <!--导航栏--> <el-header class="activity-header"> <h1>徐州传统文化推广网后台管理系统</h1> <div class="head-user"> <span>欢迎,{{username}}</span> <el-button type="text" @click="loginOut" class="logout-btn"> <i class="el-icon-switch-button"></i> 退出 </el-button> </div> </el-header> <!--主体--> <el-container> <!--侧边栏--> <el-row class="tac"> <el-col :span="12"> <el-menu default-active="2" class="custom-sidebar" @open="handleOpen" @close="handleClose" unique-opened=true background-color="#f0eae0" > <el-submenu index="1"> <template slot="title"> <i class="el-icon-s-custom"></i> <span>用户信息管理</span> </template> <el-menu-item-group> <el-menu-item index="1-1" @click="$router.push('/findUser')">用户信息</el-menu-item> <el-menu-item index="1-2" @click="$router.push('')">管理员信息</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-s-management"></i> <span>文化资源信息管理</span> </template> <el-menu-item-group> <el-menu-item index="2-1" @click="$router.push('/findCulture')">文化资源信息管理</el-menu-item> <el-menu-item index="2-2" @click="$router.push('/findCultureTopic')">文化专题信息管理</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title"> <i class="el-icon-s-management"></i> <span>文化活动信息管理</span> </template> <el-menu-item-group> <el-menu-item index="3-1" @click="$router.push('')">线上活动</el-menu-item> <el-menu-item index="3-2" @click="$router.push('')">线下活动</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="4"> <template slot="title"> <i class="el-icon-s-promotion"></i> <span>互动交流信息管理</span> </template> <el-menu-item-group> <el-menu-item index="4-1" @click="$router.push('')">问题答疑</el-menu-item> <el-menu-item index="4-2" @click="$router.push('')">数据量</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-col> </el-row> <!--页面右侧--> <el-main class="activity-main"> <div class="activity-content"> <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="ruleForm"> <el-form-item label="" > <el-input type="hidden" v-model="ruleForm.activity_id"></el-input> </el-form-item> <el-form-item label="活动名称" > <el-input v-model="ruleForm.title" placeholder="请输入活动名称"></el-input> </el-form-item> <el-form-item label="活动形式" prop="type"> <el-select v-model="ruleForm.type" placeholder="请选择活动形式"> <el-option label="线上" value="线上"></el-option> <el-option label="线下" value="线下"></el-option> </el-select> </el-form-item> <el-form-item label="活动简介"> <el-input v-model="ruleForm.introduction" placeholder="请输入活动简介"></el-input> </el-form-item> <el-form-item label="活动详情" prop="details"> <el-input v-model="ruleForm.details" type="textarea" rows="4" placeholder="请输入活动详情(时间,流程等)" ></el-input> </el-form-item> <el-form-item label="活动开始时间" prop="start_time"> <el-date-picker v-model="ruleForm.start_time" type="datetime" placeholder="选择活动开始时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" ></el-date-picker> </el-form-item> <el-form-item label="活动截止时间" prop="end_time"> <el-date-picker v-model="ruleForm.end_time" type="datetime" placeholder="选择活动截止时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" ></el-date-picker> </el-form-item> <el-form-item label="活动地点" > <el-input v-model="ruleForm.location" placeholder="请输入活动地点"></el-input> </el-form-item> <el-form-item label="报名截止时间" prop="deadline"> <el-date-picker v-model="ruleForm.deadline" type="datetime" placeholder="选择报名截止时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" ></el-date-picker> </el-form-item> <el-form-item label="最大参与人数" > <el-input v-model="ruleForm.max_people" placeholder="请输入活动最大参与人数"></el-input> </el-form-item> <el-form-item label="视频"> <!-- 视频上传组件 --> <el-upload style="margin-left:14%;margin-top:5%" class="avatar-uploader el-upload--text" :drag="true" action="http://localhost:8080/upload/uploadVideo" multiple :headers="headers" :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess" > <i v-if="!ruleForm.video" class="el-icon-upload"></i> <div v-if="!ruleForm.video" class="el-upload__text">将文件拖到此处,或点击上传</div> <!-- 上传进度显示 --> <el-progress v-if="videoFlag" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;" ></el-progress> <!-- 视频预览 --> <div v-if="ruleForm.video" class="video-preview"> <video :src="ruleForm.video" controls style="max-width: 400px; margin-top: 15px;" ></video> <el-button type="text" style="color: #f56c6c; margin-top: 10px;" @click="removeVideo" > <i class="el-icon-delete"></i> 移除视频 </el-button> </div> <div class="el-upload__tip" slot="tip">只能上传mp4/flv/avi文件,且不超过300M</div> </el-upload> <!--隐藏的输入框,用于存储视频路径 --> <el-input v-model="ruleForm.video" placeholder="视频路径" style="display: none;" ></el-input> </el-form-item> <el-form-item label="浏览量" > <el-input v-model="ruleForm.view_count"></el-input> </el-form-item> <el-form-item label="活动状态" prop="status"> <el-select v-model="ruleForm.status" placeholder="请选择活动状态"> <el-option label="未开始" value="未开始"></el-option> <el-option label="进行中" value="进行中"></el-option> <el-option label="已结束" value="已结束"></el-option> </el-select> </el-form-item> <el-form-item align="center"> <el-button type="primary" @click="addActivity()" class="btn">提交</el-button> <el-button @click="resetForm('ruleForm')" class="btn1">重置</el-button> </el-form-item> </el-form> </div> </el-main> </el-container> </el-container> </template> <script> export default { name: `addActivity`, data(){ return{ username: sessionStorage.getItem("username"), ruleForm:{ activity_id:'', title:'', type:'', introduction:'', details:'', start_time:'', end_time:'', location:'', deadline:'', max_people:'', video:'', view_count:'', status:'' }, videoForm: { videoId: '', videoUrl: '' }, videoFlag: false, Plus: true, videoUploadPercent: 0 } }, methods:{ loginOut() { sessionStorage.removeItem("username"); this.$router.push("/"); }, pageChange(index){ let title = this.title; this.$http.get("http://localhost:8081/activity/findActivityMo?index="+index+"&title="+title).then(req=>{ this.index=req.index; this.title=req.data.title; }) }, addActivity:function(){ let title=this.ruleForm.title; let type=this.ruleForm.type; let introduction=this.ruleForm.introduction; let details=this.ruleForm.details; let start_time=this.ruleForm.start_time; let end_time=this.ruleForm.end_time; let location=this.ruleForm.location; let deadline=this.ruleForm.deadline; let max_people=this.ruleForm.max_people; let video=this.ruleForm.video; let view_count=this.ruleForm.view_count; let status=this.ruleForm.status; this.$http.get("http://localhost:8081/activity/insertActivity?title="+title+"&type="+type+ "&introduction="+introduction+"&details="+details+ "&start_time="+start_time+"&end_time="+end_time+ "&location="+location+ "&deadline="+deadline+"&max_people="+max_people+"&video="+video+ "&view_count="+view_count+ "&status="+status).then(req=>{ if(req.data==true){ this.$message.success('添加成功'); this.$router.push({ name: "findActivity"}); } }) .catch(()=>{ this.$message.error('添加失败,请重试'); }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); }, // 视频上传前执行 beforeUploadVideo (file) { console.log('文件实际 MIME 类型:', file.type); // 调试用,查看真实类型 const isLt300M = file.size / 1024 / 1024 < 300 const allowedTypes = ['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb']; if (!allowedTypes.includes(file.type)) { this.$message.error('请上传正确的视频格式(mp4/ogg/flv/avi/wmv/rmvb)'); return false; } if (!isLt300M) { this.$message.error('上传视频大小不能超过300MB哦!'); return false; } }, uploadVideoProcess (event, file) { this.Plus = false; this.videoFlag = true; this.videoUploadPercent = Math.round(file.percentage); if (this.videoUploadPercent >= 100) { setTimeout(() => { this.videoFlag = false; }, 1000); } }, // 视频上传成功是执行 handleVideoSuccess (res) { this.Plus = false; this.videoUploadPercent = 100; console.log(res); if (res.resCode === '200') { // 关键:给表单的 video 字段赋(用于提交) this.ruleForm.video = res.VideoUrl; // 必须加这行! this.videoForm.videoId = res.newVideoName; this.videoForm.videoUrl = res.VideoUrl; this.$message.success('视频上传成功!'); } else { this.$message.error('视频上传失败,请重新上传!'); } } } } </script> <style scoped> /*导航栏样式*/ .activity-header { /*设置背景为线性渐变效果*/ background: linear-gradient(90deg, #cbb89f 0%, #f0eae0 50%, #cbb89f 100%); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } h1 { color: white; font-size: 25px; font-weight: bold; margin-left: 20px; } .head-user { color: white; font-size: 16px; font-weight: bold; } .logout-btn { color: white; margin-left: 24px; font-size: 16px; transition: all 0.3s; } .logout-btn:hover { color: #b09d86; transform: scale(1.15); } /*侧边栏样式*/ .custom-sidebar { width: 240px; height: 1200px; border-right: 1px solid #e0d8c8; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05); } .el-submenu .el-menu { background-color: #f5f0e8 !important; border-left: 3px solid #cbb89f; } .el-menu-item { height: 50px; line-height: 50px; padding-left: 60px !important; } .el-menu-item:hover{ background-color: #d8d0c2 !important; padding-left: 60px !important; } .el-menu-item.is-active { background-color: #cbb89f !important; color: #1a2b3c !important; font-weight: 600; } /*主内容样式*/ .activity-main { display: flex; } .activity-content { background-color: white; border-radius: 15px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5); padding: 20px; width: 100%; } .video-preview { display: flex; justify-content: center; align-items: center; padding: 5px 0; } .no-video { color: #999; font-size: 14px; } .video-preview video { border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } </style>出现这个bug:element-ui.common.js:29236 POST http://localhost:8080/upload/uploadVideo 4为什么
最新发布
08-27
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值