使用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=>{})
}
}
}
})
更多推荐
已为社区贡献2条内容
所有评论(0)