前后端分离实现mp3文件与Form表单同步上传

最新推荐文章于 2024-04-28 11:00:43 发布

雾岛听风_hy

最新推荐文章于 2024-04-28 11:00:43 发布

阅读量803

点赞数

分类专栏： Vue+SpringBoot 文章标签： spring boot vue.js java

本文链接：https://blog.csdn.net/Silence_dhy/article/details/120306293

版权

Vue+SpringBoot 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue+SpringBoot实现mp3文件与Form表单同步上传

1、Vue前端

描述： 新new一个FormData对象，将mp3文件与Form表单数据一起存入这个FormData里面，向后台直接提交FormData数据，便可实现mp3音频文件与Form表单同步上传；

亮点： 添加了上传文件类型是否是mp3格式的校验；

（1）上传文件对话框

<!--添加歌曲对话框-->
        <el-dialog title="添加歌曲" :visible.sync="addSongdialogVisible"   width="400px" center>
            <el-form v-bind:model="addSongForm" v-bind:rules="addSongrules" label-position="right" ref="addSongForm"  label-width="80px"> 
                <el-form-item prop="name" label="歌名">
                    <el-input placeholder="请输入歌名" v-model="addSongForm.name"></el-input>
                </el-form-item>
                <el-form-item prop="introduction" label="专辑名">
                    <el-input v-model="addSongForm.introduction" placeholder="请输入专辑名"></el-input>
                </el-form-item>
                <el-form-item prop="lyric" label="歌词">
                    <el-input type="textarea" placeholder="请添加歌词" v-model="addSongForm.lyric"></el-input>
                </el-form-item>
                <el-form-item prop="songFile" label="上传歌曲">
                    <input type="file" @change="getFile($event)" > <!--mp3文件上传-->
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="addSongdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="SubmitSongForm()">确 定</el-button>
            </span>
        </el-dialog>

（2）文件类型校验

//获取到传上来的文件，随着表单formdata传给后台
         getFile(event) {
             /*
             校验是否是mp3文件
             */
            let testmsg = event.target.files[0].name.substring(event.target.files[0].name.lastIndexOf('.')+1);//取出上传文件的后缀名
            console.log("===>"+testmsg);
            const flag = testmsg === "mp3"; 
            if(flag){ //是mp3文件
                this.$message({
                    message: "文件选择成功，是mp3文件",
                    type: 'success'
                })
                this.file = event.target.files[0]; //取出文件
            }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; //返回给前端
    }