1. 图片上传功能
由于之前的上传功能, 上传的只有固定的图片, 并没有实现图片的上传功能. 这里就来完善上传功能.
这里使用固定的地址上传, 要想前端再去访问该地址, 启动的项目去直接访问本地的静态地址会有报错 (Not allowed to load local resource)
原因: 浏览器出于安全方面的考虑，禁止网页访问本地文件，因为图片是存在项目目录下的，所以无法通过本地的 url 进行访问。
在linux服务器上, 上传到服务器上的地址里, 想要去直接访问服务上的文件夹, 也是不可能的.
解决办法: 配置 虚拟路径 映射 本地路径
1.1 配置虚拟路径
这里将 本地路径 映射到了 虚拟路径, 这里就可以通过虚拟路径来访问本地路径里的内容了
@Configuration
public class AppConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
// 这里 "/prodecut/**" 是虚拟路径
// 这里 "file:E/images/" 是本地路径
registry.addResourceHandler("/product/**").addResourceLocations("file:E:/images/");
}
}
1.2 前端代码
这里对前端上传功能进行完善
1.2.1 upload.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>上传音乐</title>
<link rel="stylesheet" href="css/upload.css">
</head>
<body>
<!--enctype="multipart/form-data"-->
<form enctype="multipart/form-data" id="form1">
<div class="one">
<span class="message">文件上传: </span>
<input type="file" name="filename" id="file" />
</div>
<div class="one">
<span class="message">歌手姓名: </span>
<label><input type="text" name="singer" placeholder="请输入歌手名" id="singer" /> </label>
</div>
<div class="one">
<span class="message">封面选择: </span>
<input type="file" id="file2" name="imgname" onchange="upCh(this)"/>
</div>
<div class="one">
<span class="message">图片样式: </span>
<img id="fileimg" src="" />
</div>
<div class="one">
<input type="button" value="上传" id="submit" onclick="login()"/>
</div>
</form>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function upCh(file) {
let img = document.getElementById('fileimg');
let formData = new FormData();
let imgUrl = file.files[0];
console.log(imgUrl);
if (imgUrl) {
console.log(1);
formData.append('file',imgUrl);
img.src = window.URL.createObjectURL(imgUrl);
}
}
function login(){
// 获取到这里的文件信息
let filename = $('#file')[0].files[0];
if (filename == undefined) {
alert("请选择文件!");
return;
}
// 获取到这里的歌手信息
let singer = document.querySelector('#singer');
if (singer.value.trim() == ""){
alert("请添加歌手!");
return;
}
// 获取到图片信息
let imgname = $('#file2')[0].files[0];
if (imgname == undefined) {
alert("请选择图片!");
return;
}
let isJPG = imgname.type === "image/jpeg";
if (!isJPG){
alert("上传图片格式部是jpg的!");
return;
}
// 使用formData来返回
let formData = new FormData($("#form1")[0]);
formData.append("filename",filename);
formData.append("singer",singer.value.trim());
formData.append("imgname",imgname);
$.ajax({
type: "POST",
url: "music/upload",
data: formData,
processData: false,
contentType: false,
success: function(data) {
if(data.status == -1){
alert(data.message);
location.assign("upload.html");
}else{
alert(data.message);
location.assign("index.html");
}
},
error:function() {
alert("出现异常");
location.assign("upload.html");
}
});
}
</script>
</body>
</html>
1.2.2 upload.css
#form1{
display: flex;
flex-direction: column;
align-items: center;
}
.one{
display: flex;
justify-content: center;
align-items: center;
}
.one .message{
width: 110px;
height: 50px;
line-height: 50px;
font-weight: 600;
}
.one input{
width: 200px;
height: 30px;
border-radius: 5px;
padding: 0;
}
#singer{
width:192px;
padding-left: 4px;
}
#submit{
margin-top: 10px;
}
#submit:active{
background: #f23a2e;
color: #fff;
}
#fileimg{
width: 200px;
height: 200px;
border: 1px solid #eee;
}
.Btn{
width: 100px;
background: #4BCD61;
border: 0px;
}
1.3 后端代码
这里的图片上传, 要注意图片名不能出现一致的情况, 所以这里用到 UUID 进行处理
配置文件
upload.path=E:/logs/
uploadImg=E:/images/
具体代码
@Value("${upload.path}")
public String SAVE_PATH;
@Value("${uploadImg}")
public String IMG_PATH;
/**
* 上传音乐
* @param singer
* @param file
* @param request
* @return
*/
@RequestMapping("/upload")
public ResponseBodyMessage<Boolean> insertMusic(@RequestPart("singer") String singer,
@RequestPart("filename") MultipartFile file,
@RequestPart("imgname") MultipartFile img,
HttpServletRequest request,
HttpServletResponse response) {
// 检测登录
HttpSession session = request.getSession(false);
if (session == null || session.getAttribute(Constant.USER_SESSION_KEY) == null) {
System.out.println("当前未登录!");
return new ResponseBodyMessage<>(-1,"请登录后上传",false);
}
// 文件的类型
String fileNameAndType = file.getOriginalFilename();
String imgType = img.getOriginalFilename();
String ext = img.getOriginalFilename().substring(img.getOriginalFilename().lastIndexOf("."));
String imgNewName = UUID.randomUUID().toString().replaceAll("-","")+ext;
// 防止出现重复的相同歌曲和相同歌手.可以出现相同歌曲不同歌手
String title = fileNameAndType.substring(0,fileNameAndType.lastIndexOf('.'));
// 可能出现多首名称相同的歌曲, 所以用 List
List<Music> list = musicService.selectByTitle(title);
if(list != null){
for(Music music : list) {
if(music.getAuthor().equals(singer)){
return new ResponseBodyMessage<>(-1,"当前歌手的歌曲已经存在!",false);
}
}
}
// 创建文件
String path = SAVE_PATH +singer+"-"+fileNameAndType;
String path2 = IMG_PATH + imgNewName;
File dest = new File(path);
if(!dest.exists()) {
dest.mkdirs();
}
File dest2 = new File(path2);
if(!dest.exists()) {
dest.mkdirs();
}
try {
file.transferTo(dest);
//return new ResponseBodyMessage<>(1,"上传成功!",true);
} catch (IOException e) {
e.printStackTrace();
return new ResponseBodyMessage<>(-1,"服务器上传音乐文件失败!",false);
}
try {
img.transferTo(dest2);
} catch (IOException e) {
e.printStackTrace();
return new ResponseBodyMessage<>(-1,"服务器上传图片文件失败!",false);
}
// 这里对是不是 MP3 文件进行判断. 主要是判断是否存在 TAG 这个字符
File file1 = new File(path);
byte[] res = null;
try {
res = Files.readAllBytes(file1.toPath());
if(res == null) {
return new ResponseBodyMessage<>(-1,"当前文件不存在",false);
}
String str = new String(res);
if(str.indexOf("ID3") != 0 && str.lastIndexOf("TAG") != str.length() - 128) {
file1.delete();
return new ResponseBodyMessage<>(-1,"当前不是mp3文件",false);
}
}catch (IOException e){
e.printStackTrace();
return new ResponseBodyMessage<>(-1,"服务器出现问题", false);
}
// 在数据库中上传数据
User user = (User) session.getAttribute(Constant.USER_SESSION_KEY);
// 这里传递的 path 没有带 `.MP3` 后期在前端进行设置
String uploadPath = "/music/play?path="+singer+"-"+title;
String imgPath = "/product/"+ imgNewName;
try {
int ret = musicService.insert(title,singer,uploadPath,imgPath,user.getUserId());
if(ret == 1) {
// response.sendRedirect("/index.html");
return new ResponseBodyMessage<>(1,"上传成功",true);
}else {
return new ResponseBodyMessage<>(-1,"数据库上传失败",false);
}
}catch (BindingException e) {
dest.delete();
return new ResponseBodyMessage<>(-1,"数据库上传失败",false);
}
}