Vue前后端分离完成文件上传

Vue前后端分离完成文件上传

1、为文件上传框绑定一个ref

<input type="file" id="imgfile"  ref="myFile" style="display: none" onchange="imgfileChange()" />

2、指定一个方法将改文件上传

1、let formData=new FormData();//新建一个表单

2、formData.append('file',file );//将获取的文件追加到表单

let myFile=this.$refs.myFile;
let files=myFile.files;
let file=files[0];
let formData=new FormData();//新建一个表单
formData.append('file',file );//将获取的文件追加到表单
//发送axios将表单发送
axios({
    method:'post',
    url:'http://localhost:8989/place/save',
    data:formData,
    headers:{
        'Content-Type': 'multipart/form-data'//必须要指定
    }
}).then((res=>{
    console.log(res.data);
}))

3、后端写一个控制器接收请求

@PostMapping("/save")
public String save(MultipartFile file){//此处的file和前面构建表单的file名一致
    System.out.println(file.getOriginalFilename());
    return "ok";
}