在线音乐播放器 --- 图片上传

文章目录

1. 图片上传功能

由于之前的上传功能, 上传的只有固定的图片, 并没有实现图片的上传功能. 这里就来完善上传功能.

这里使用固定的地址上传, 要想前端再去访问该地址, 启动的项目去直接访问本地的静态地址会有报错 (

Not allowed to load local resource

)

原因: 浏览器出于安全方面的考虑，禁止网页访问本地文件，因为图片是存在项目目录下的，所以无法通过本地的 url 进行访问。

在linux服务器上, 上传到服务器上的地址里, 想要去直接访问服务上的文件夹, 也是不可能的.

解决办法: 配置虚拟路径映射本地路径

1.1 配置虚拟路径

这里将 本地路径映射到了虚拟路径, 这里就可以通过虚拟路径来访问本地路径里的内容了

@ConfigurationpublicclassAppConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddResourceHandlers(ResourceHandlerRegistry registry){// 这里 "/prodecut/**" 是虚拟路径// 这里 "file:E/images/" 是本地路径  
        registry.addResourceHandler("/product/**").addResourceLocations("file:E:/images/");}}

1.2 前端代码

这里对前端上传功能进行完善
在这里插入图片描述

1.2.1 upload.html

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><title>上传音乐</title><linkrel="stylesheet"href="css/upload.css"></head><body><!--enctype="multipart/form-data"--><formenctype="multipart/form-data"id="form1"><divclass="one"><spanclass="message">文件上传: </span><inputtype="file"name="filename"id="file"/></div><divclass="one"><spanclass="message">歌手姓名: </span><label><inputtype="text"name="singer"placeholder="请输入歌手名"id="singer"/></label></div><divclass="one"><spanclass="message">封面选择: </span><inputtype="file"id="file2"name="imgname"onchange="upCh(this)"/></div><divclass="one"><spanclass="message">图片样式: </span><imgid="fileimg"src=""/></div><divclass="one"><inputtype="button"value="上传"id="submit"onclick="login()"/></div></form><scriptsrc="js/jquery-3.3.1.min.js"></script><script>functionupCh(file){let img = document.getElementById('fileimg');let formData =newFormData();let imgUrl = file.files[0];
        console.log(imgUrl);if(imgUrl){
            console.log(1);
            formData.append('file',imgUrl);
            img.src = window.URL.createObjectURL(imgUrl);}}functionlogin(){// 获取到这里的文件信息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 =newFormData($("#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}")publicString SAVE_PATH;@Value("${uploadImg}")publicString IMG_PATH;/**
     * 上传音乐
     * @param singer
     * @param file
     * @param request
     * @return
     */@RequestMapping("/upload")publicResponseBodyMessage<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("当前未登录!");returnnewResponseBodyMessage<>(-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('.'));// 可能出现多首名称相同的歌曲, 所以用 ListList<Music> list = musicService.selectByTitle(title);if(list !=null){for(Music music : list){if(music.getAuthor().equals(singer)){returnnewResponseBodyMessage<>(-1,"当前歌手的歌曲已经存在!",false);}}}// 创建文件String path = SAVE_PATH +singer+"-"+fileNameAndType;String path2 = IMG_PATH + imgNewName;File dest =newFile(path);if(!dest.exists()){
            dest.mkdirs();}File dest2 =newFile(path2);if(!dest.exists()){
            dest.mkdirs();}try{
            file.transferTo(dest);//return new ResponseBodyMessage<>(1,"上传成功!",true);}catch(IOException e){
            e.printStackTrace();returnnewResponseBodyMessage<>(-1,"服务器上传音乐文件失败!",false);}try{
            img.transferTo(dest2);}catch(IOException e){
            e.printStackTrace();returnnewResponseBodyMessage<>(-1,"服务器上传图片文件失败!",false);}// 这里对是不是 MP3 文件进行判断. 主要是判断是否存在 TAG 这个字符File file1 =newFile(path);byte[] res =null;try{
            res =Files.readAllBytes(file1.toPath());if(res ==null){returnnewResponseBodyMessage<>(-1,"当前文件不存在",false);}String str =newString(res);if(str.indexOf("ID3")!=0&& str.lastIndexOf("TAG")!= str.length()-128){
                file1.delete();returnnewResponseBodyMessage<>(-1,"当前不是mp3文件",false);}}catch(IOException e){
            e.printStackTrace();returnnewResponseBodyMessage<>(-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");returnnewResponseBodyMessage<>(1,"上传成功",true);}else{returnnewResponseBodyMessage<>(-1,"数据库上传失败",false);}}catch(BindingException e){
            dest.delete();returnnewResponseBodyMessage<>(-1,"数据库上传失败",false);}}

标签： java

本文转载自: https://blog.csdn.net/wwzzzzzzzzzzzzz/article/details/126633258
版权归原作者 独一无二的哈密瓜 所有，如有侵权，请联系我们删除。

在线音乐播放器 --- 图片上传

文章目录

1. 图片上传功能

1.1 配置虚拟路径

1.2 前端代码

1.2.1 upload.html

1.2.2 upload.css

1.3 后端代码

发表评论

“在线音乐播放器 --- 图片上传”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航