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、指定文件上传的位置

upload.dir=G:/IdeaProjects/springboot/055-springboot-travels/src/main/resources/static/images

4、引入文件工具类的依赖,便于拿到文件后缀名

<dependency>     
    <groupId>commons-fileupload</groupId>      
    <artifactId>commons-fileupload</artifactId>  
    <version>1.4</version>
</dependency>

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

获取文件后缀

String extension = FilenameUtils.getExtension(file.getOriginalFilename());

使用时间戳的方式重命名文件

String newFileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) +"."+ extension;

@Value("${upload.dir}")
private String realPath;

@PostMapping("/save")
public String save(MultipartFile file) {//无需@RequestBody
    System.out.println(file.getOriginalFilename());
    //文件上传
    String extension = FilenameUtils.getExtension(file.getOriginalFilename());
    String newFileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) +"."+ extension;
    try {
        file.transferTo(new File(realPath, newFileName));
    } catch (IOException e) {
        e.printStackTrace();
    }
    return "ok";
}

这样，上传的文件就保存到upload.dir对应的路径中了