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为什么
最新发布