Vue SpringBoot实现mp3文件与表单同步上传1、Vue前端描述：新newFormdata对象，将mp3文件与表单数据一起
添加了对亮点：上传文件类型是否为mp3格式的检查；
(1)文件上传对话框！ -添加歌曲对话框-- el-dialog title='添加歌曲' : visible.sync=' addsongdialogvisible ' width=' 400 px ' center El-formv-binc ddsongform ' label-width=' 80px ' El-form-item prop=' name addsongform.name '/El-input/El-form-item El-form-item prop=' introduction ' label='专辑名称' El-inputv-model=' addsongform.introduction ' 请添加l='歌词' El-input type=' textarea ' placeholder='歌词' v-model=' El-form-item El-form-item prop=' sonson - -上传MP3文件---/El-form-item/El-formspan slot=' footer ' El-button @ click=' addsongdialogvisible=El-button El-buttontype=' primary ' @ click=' submitsongform () '固定/el-button /span /el-dialog (2) '2'文档类型将表单formdata传递到背景getfile(event )/(MP3文件)/lettestmsg=event.target.files [0].name.substring const flag=testmsg==='mp3 '； if(flag )//成功选择了mp3文件this.$message ) (消息： )文件。 mp3文件(，type:(success ) ) (this.file=event.tarrrent //取回文件)如果不是}else//MP3文件，则this.file=“”； this.$message(message: )上传文件类型仅支持mp3！ '，
type: 'warning' }) } } （3）新new的FormData，实现Form表单与mp3文件一起上传 //实现mp3文件与Form表单一起上传的方法SubmitSongForm(){ let formdata = new FormData();//携带文件同步上传必须使用此对象 if(this.file){ //已经添加了mp3文件 formdata.append("file",this.file); formdata.append("singerId",this.singer_id); formdata.append("singerName",this.singer_name); formdata.append("songName",this.addSongForm.name); formdata.append("introduction",this.addSongForm.introduction); formdata.append("lyric",this.addSongForm.lyric); //向后台发送添加的请求 addSingerSong(formdata).then(res => { if(res.status == 1){ this.notify("音乐添加成功!","success"); }else{ this.notify("音乐添加失败!","error"); } this.addSongdialogVisible = false;//关闭添加音乐对话框 }) }else{//未添加mp3文件或添加的不是mp3文件 this.$message({ message: '文件类型仅支持mp3格式，请重新添加文件！', type: 'error' }) } } 2、SpringBoot后台描述： 将传来的mp3文件存到本地，并添加相对地址url到数据库；
@RequestMapping(value = "/add",method = RequestMethod.POST) public Object addSong(HttpServletRequest request, @RequestParam("file")MultipartFile musicfile,@RequestParam("songName") String name, @RequestParam("introduction") String introduction,@RequestParam("lyric") String lyric, @RequestParam("singerId") int singer_id,@RequestParam("singerName") String singer_name){ JSONObject jsonObject = new JSONObject(); if (musicfile.isEmpty()) { jsonObject.put(Consts.STATUS, "error"); jsonObject.put(Consts.MSG, "上传的文件为空！"); return jsonObject; } String song_name ; //判断传来的文件名中是否包含了歌手的名字 if (musicfile.getOriginalFilename().indexOf(singer_name)!=-1){ //去掉.mp3后缀名 song_name = musicfile.getOriginalFilename().substring(0,musicfile.getOriginalFilename().indexOf('.')); }else { song_name = singer_name + "-" + musicfile.getOriginalFilename().substring(0,musicfile.getOriginalFilename().indexOf('.'));//如果没有，则给命名为 "歌手名-歌曲名" } //filepath 音乐文件存储的路径 String filepath = System.getProperty("user.dir")+System.getProperty("file.separator")+"song"+ System.getProperty("file.separator")+"SingerSong"; // File file = new File(filepath); if (!file.exists()){ file.mkdir(); } String music_url = "/song/SingerSong/"+ song_name;//存入数据库的相对路径 File dest = new File(filepath+System.getProperty("file.separator")+song_name);//存入本地磁盘的绝对路径 Date create_date = new Date(); try { musicfile.transferTo(dest);//执行存储，真正存储到本地磁盘 Song song = new Song(); song.setSinger_id(singer_id); song.setName(song_name); song.setIntroduction(introduction); song.setCreate_time(create_date); song.setUpdate_time(create_date); song.setLyric(lyric); song.setUrl(music_url); boolean flag = songService.addSong(song); //将歌曲信息存入mysql数据库 if (flag){ jsonObject.put(Consts.STATUS,1); //成功！ }else { jsonObject.put(Consts.STATUS,0);//失败! } } catch (IOException e) { e.printStackTrace(); } return jsonObject; //返回给前端 } 3、结语：这是我个人的一些小总结，希望对各位小伙伴有用；如果还存在疑问，请给我留言，大家一起讨论！