vue+elementUI 文件上传功能(表单)

elementUI普通的文件上传比较简单，但是当与表单结合是就会比较复杂。下面分别是普通文件更新和与表单相互结合的文件上传功能实现。

           //普通的文件上传
           <template slot-scope="scope">
              <div class="singer-img">
                <img :src="getUrl(scope.row.picture)" width="100%" alt="未找到资源...">
              </div>
              <!--上传头像-->
              <el-upload :action="uploadUrl(scope.row.id)"
                         :before-upload="beforeAvatorUpload"
                         :on-success="handleAvatorSuccess">
                <el-button type="primary" size="mini">更新图片</el-button>
              </el-upload>
            </template>
          </el-table-column>

//后台controller实现
    /**
     * 更新歌手头像
     */
    @PostMapping("/updateSingerPicture")
    @ApiOperation(value = "更新图片", notes = "更新歌手头像")
    public String updateSingerPicture(@RequestParam("file")MultipartFile file, @RequestParam("id") Integer id) {

        HashMap<String, Object> map = new HashMap<>();
        if (file.isEmpty()) {
            map.put(Constant.CODE, 0);
            map.put(Constant.MSG, "文件上传失败...");
            return JSON.toJSONString(map);
        }
        //文件名 = 当前时间到毫秒 + 原来的文件名
        String filename = System.currentTimeMillis() + file.getOriginalFilename();
        //文件路径
        String filepath = System.getProperty("user.dir")
                            + System.getProperty("file.separator")
                            + "music-server"
                            + System.getProperty("file.separator")
                            + "data"
                            + System.getProperty("file.separator")
                            + "img"
                            + System.getProperty("file.separator")
                            + "singerPic";
        //如果文件路径不存在，新建该路径
        File file1 = new File(filepath);
        if (!file1.exists()) {
            file1.mkdir();
        }
        //实际的文件地址
        File dest = new File(filepath + System.getProperty("file.separator") + filename);
        //存储到数据库中的相对文件地址
        String storeAvatorPath = "data/img/singerPic/" + filename;
        try {
            file.transferTo(dest);
            Singer singer = new Singer();
            singer.setId(id);
            singer.setPicture(storeAvatorPath);
            int result = singerService.updateSinger(singer);
            if (result > 0) {
                map.put(Constant.CODE, 1);
                map.put(Constant.MSG, "上传成功...");
                map.put("picturePath", storeAvatorPath);
                return JSON.toJSONString(map);
            }else {
                map.put(Constant.CODE, 0);
                map.put(Constant.MSG, "上传失败...");
                return JSON.toJSONString(map);
            }
        } catch (IOException e) {
            map.put(Constant.CODE, 0);
            map.put(Constant.MSG, "上传失败..." + e.getMessage());
            return JSON.toJSONString(map);
        }
    }

携带表单的文件上传

    <el-form-item prop="url" label="歌曲上传" size="mini">
          <el-upload
            class="upload-demo"
            :on-success="handleMusicSuccess"
            accept="mp3"
            :action="materialMusicAndText()"
            :auto-upload="false"
            :before-upload="beforeUpload"
            ref="upload"
            :data="songAddForm"
            multiple>
            <el-button size="small">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item style="margin-left: 15%;">
          <el-button type="primary" size="mini" @click="addSong('songAddForm')">添加</el-button>
          <el-button size="mini" @click="resetAddForm">重置</el-button>
        </el-form-item>

 //后台controller实现
    @PostMapping("/insertSong")
    @ApiOperation(value = "添加歌曲", notes = "添加歌曲信息")
    public String insertSong(Song song, @RequestParam("file") MultipartFile file) {

        HashMap<String, Object> map = new HashMap<>();
        //上传歌曲文件
        if (file.isEmpty()) {
            map.put(Constant.CODE, 0);
            map.put(Constant.MSG, "歌曲上传失败...");
            return JSON.toJSONString(map);
        }
        //文件名 = 当前时间到毫秒 + 原来的文件名
        String filename = System.currentTimeMillis() + file.getOriginalFilename();
        //文件路径
        String filepath = System.getProperty("user.dir")
                + System.getProperty("file.separator")
                + "music-server"
                + System.getProperty("file.separator")
                + "data"
                + System.getProperty("file.separator")
                + "song";
        //如果文件路径不存在，新建该路径
        File file1 = new File(filepath);
        if (!file1.exists()) {
            file1.mkdir();
        }
        //实际的文件地址
        File dest = new File(filepath + System.getProperty("file.separator") + filename);
        //存储到数据库中的相对文件地址
        String storeSongPath = "data/song/" + filename;
        try {
            file.transferTo(dest);
            song.setUrl(storeSongPath);
            int result = songService.insertSong(song);
            if (result > 0) {
                map.put(Constant.CODE, 1);
                map.put(Constant.MSG, "添加成功...");
                map.put("storeSongPath", storeSongPath);
                return JSON.toJSONString(map);
            }else {
                map.put(Constant.CODE, 0);
                map.put(Constant.MSG, "添加失败...");
                return JSON.toJSONString(map);
            }
        } catch (IOException e) {
            map.put(Constant.CODE, 0);
            map.put(Constant.MSG, "添加失败..." + e.getMessage());
            return JSON.toJSONString(map);
        }
    }