使用vue的axios.post方式上传multipart/form-data类型的文件

一、post方法上传

拿我这里上传视频文件做例子：

1、后端接口

 @PostMapping("/addVideo")
 @ResponseBody
 public String addVideo( VideoDto videoDto) throws IOException {
          MultipartFile videoFile=videoDto.getVideoFile();
          System.out.println(videoFile);
}   

2、具体VideoDto类

@Data
public class  VideoDto {
    private String title;
    private String username;
    private MultipartFile videoFile;
    }

3、前端的html获取文件及上传代码

<input type="file"  @change="getFile($event)"  >
<a  @click="post" >确认上传</a>

3、前端vue的html代码

 new Vue({
        el: '#app',
        data: {
            videoFile: '',
            title: '',
            username: ''
        },
        methods:{
          //通过此函数将上面上传的文件添加到vue的data内
         getFile(event){
          this.videoFile=event.currentTarget.files[0];
         },
         post(){
           let params = new FormData()
           params.append('title', this.title)
           params.append('username', this.username)
           params.append('videoFile', this.videoFile)
           axios.post('/addVideo' ,params,
                {
                  headers:{
                 'Content-Type' : 'multipart/form-data'
                }
                }).then(res=>{})  
              }
         }
         }
    })