欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-20 17:49:28
...

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对应的路径中了