image.png
image.png
- 实现了添加新班课并上传
具体代码参考本人github
后端：
后端
package com.springboot.mybatis.controller;
import org.springframework.stereotype.Controller;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
/*
* 上传⽂件控制器
* 直接上传到服务器
* */
@RestController
public class UploadController {
//指定⼀个临时⽬录作为上传⽬录
// private static String UPLOAD_FOLDER = "E:/temp/";
// 遇到http://loaclhost:8080,则跳转到upload.html⻚⾯
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");
@GetMapping("/")
public String index(){
return "upload";
}
//
@PostMapping("/upload")
public String fileUpload(@RequestParam("file")MultipartFile srcFile, RedirectAttributes
redirectAttributes){
//前端没有选择⽂件。srcFile为空
if(srcFile.isEmpty()){
redirectAttributes.addFlashAttribute("message","请选择⼀个⽂件");
return "redirect:upload_status";
}
//选择了⽂件，开始进⾏上传操作
String returnFileName ="";
try {
// 构建上传⽬标路径,找到项⽬的target的classes⽬录
File destFile = new File(ResourceUtils.getURL("classPath").getPath());
if(!destFile.exists()){
destFile = new File("");
}
System.out.println("file path:"+destFile.getAbsolutePath());
//拼接static⽬录
File upload = new File(destFile.getAbsolutePath(),df.format(new Date())+"/");
String fileName= srcFile.getOriginalFilename();
String suffixName = fileName.substring(fileName.lastIndexOf("."));
fileName= UUID.randomUUID() +suffixName;
// 若⽊⽐奥⽂件夹不存在，则⾃动创建
if(!upload.exists()){
upload.mkdirs();
}
System.out.println("完整的上传路径："+upload.getAbsolutePath()+"/"+fileName);
//更具srcFlie的⼤⼩准备字节数组,装备⼀个字节数组
byte[] bytes = srcFile.getBytes();
//拼接上传路径
// Path path = Paths.get(UPLOAD_FOLDER + srcFile.getOriginalFilename());
//最重要的⼀步，开始将源⽂件写⼊⽬标地址
Path path = Paths.get(upload.getAbsolutePath()+"/"+fileName);
Files.write(path,bytes);
returnFileName="http://localhost:8080/upload/"+ srcFile.getOriginalFilename();
//将⽂件上传成功的信息写⼊messages
redirectAttributes.addFlashAttribute("message","⽂件上传成功"+fileName);
}catch (IOException e){
e.printStackTrace();
}
return "redirect:upload_status";
}
//匹配upload_status⻚⾯
@GetMapping("/upload_status")
public String uploadStatusPage(){
return "upload_status";
}
}
前端：
：<template>
<div class="container">
<div class="card">
<span class="top">班级</span><span class="biaoqian">*</span><br/><br>
<input type="text " placeholder="请输⼊班级" v-model="course.courseName"
class="input-box" /><br/>
<span class="top">课程</span><span class="biaoqian">*</span><br/><br>
<input type="text " placeholder="请输⼊课程名称" v-model="course.courseClass"
class="input-box" /><br/>
<span class="top">类型</span><span class="biaoqian">*</span><br/>
<div>
<input name="save" type="checkbox" class="save"><span class="title">学校课表
班课</span><span class="title se">(学校课表班课就是学校安排课程表⾥的正式班课）
</span>
</div>
<br>
<p class="title">选择班课封⾯</p>
<div class="preview" @click="handleClick()">
<img :src="course.cover" class="cover" v-if="!show" />
<img src="../assets/icon_add.png" class="icon-plus" v-if="show" />
<input type="file" @change="getFile($event)" style="display: none;"
id="coverFile" />
</div>
<hr>
<button @click="addCourse(course)" class="btn">确定</button>
<button @click="submit($event)" class="btn qx">取消</button>
</div>
</div>
</template>
<script>
export default {
name: 'NewCourse',
data() {
return {
loginUserId: 1,
course: {
courseName: '',
courseClass: '',
cover: '',
},
file: '',
show: true
};
},
methods: {
//点击图⽚预览区，即模拟点击⽂件选择组件
handleClick: function() {
document.getElementById('coverFile').click();
},
//图⽚预览
getFile: function() {
this.file = event.target.files[0];
var windowURL = window.URL || window.webkitURL;
this.course.cover = windowURL.createObjectURL(this.file);
this.show = false;
},
addCourse: function(course) {
var _this = this;
this.$http({
method: 'post',
url: 'http://localhost:8080/api/course',
data: {
userId: _this.loginUserId,
courseName: course.courseName,
courseClass: course.courseClass,
cover: course.cover,
finished: 0
}
}).then(function() {
alert('新增班课成功');
_this.$router.push('/');
});
}
}
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
padding-top: 20px;
padding-left: 100px;
background-color: #fff;
margin-top: 20px;
}
.card{
margin: 0 auto;
}
.input-box {
width: 500px;
height: 25px;
margin-bottom: 40px;
font-size: 14px;
}
.btn {
margin-top: 20px;
width: 100px;
height: 30px;
border: 1px solid rgb(0, 187, 221);
background-color: #fff;
outline: none;
color: rgb(0, 187, 221);
font-size: 16px;
margin-left: 80px;
}
.qx{
margin-left: 100px;
border: 1px solid rgb(148, 148,148);
color: rgb(148, 148,148);
}
.preview {
width: 100px;
height: 100px;
border: 2px dashed #aaa;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.icon-plus {
width: 60px;
height: 60px;
}
.cover {
width: 100%;
height: 100%;
}
.save {
float: left;
}
.title{
font-size: 13px;
}
.se{
color:#6695CF;
}
.biaoqian{
color: #FF0000;
}
.top{
font-size: 13px;
}
</style>
