这几天想写一个前后端分离的文件上传的小demo，但是在处理好跨域之后发现普通请求跨域都没问题，唯独文件上传的el-upload传输文件后端获取不到，一直报500的错误，后端接受不到文件报null

前端是这样的，还写了一个测试跨域是否成功的按钮test

<el-upload
	    v-model:file-list="fileList"
	    class="upload-demo"
	    action="http://localhost:1234/music/addMusic"
	  >
	    <el-button type="primary">点击上传</el-button>
	  </el-upload>
    <el-button type="primary" @click="test()">测试</el-button>

后端是这样的

@RestController
@CrossOrigin
@RequestMapping("/music")
public class musicController {

    @RequestMapping("/test")
    public void test(){
        System.out.println("yes!");
    }

    @PostMapping("/addMusic")
    public String getMusicFile(MultipartFile musicFile){
        String ordFileName=musicFile.getOriginalFilename();
        System.out.println("MusicFiles:"+ordFileName);
        String filePath= FileUtil.getUpLoadFilePath();
        String newFileName=System.currentTimeMillis()+ordFileName;
        try{
            FileUtil.uploadFile(musicFile.getBytes(),filePath,newFileName);
        }catch (Exception e){
            throw new RuntimeException(e);
        }
        return newFileName;
    }
}

后面发现问题在于使用el-upload时，发送的文件默认名称为file，在没有重新定义的情况下，后端接受也应该为file

因此解决方法就是将后端的MultipartFile musicFile改为MultipartFile file

@PostMapping("/addMusic")
    public String getMusicFile(MultipartFile file){
        String ordFileName=file.getOriginalFilename();
        System.out.println("MusicFiles:"+ordFileName);
        String filePath= FileUtil.getUpLoadFilePath();
        String newFileName=System.currentTimeMillis()+ordFileName;
        try{
            FileUtil.uploadFile(file.getBytes(),filePath,newFileName);
        }catch (Exception e){
            throw new RuntimeException(e);
        }
        return newFileName;
    }

重新运行，不再报错了