基于vue+springboot的⽂件上传（异步请求）
前⾔
注：本⽂主要处理前端如何向后端传参以及后端如何处理
今天在使⽤vue+springboot实现⽂件上传的时候遇到了诸多问题，查相关资料的时候都太散乱了，导致整了⼀下午才真正完成了⽂件上传功能，所以在此总结⼀下整个流程，以及需要主要的点，以便以后再次使⽤，同时让⼀些像我这样学了⼀半就开跑的⼈少⾛些弯路
后端部分
在这⾥我先讲后端部分，后端的实现其实相较于前端更为简单（可能因为我个⼈⽐较熟悉后端）
后端处理上传⽽来的⽂件分为以下⼏步
获取项⽬的绝对路径
创建⽂件⽬录
创建⽂件
上传⽂件到服务器本地
那么下⾯直接结合注释看代码吧
需要导⼊的包（springboot的包就不说了，在这⾥只是讲⽂件上传）
<!--这个包就是可以使⽤FileNameUtils-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
具体代码，能做注释的都做了
结合注释阅读吧
package ller;
import org.apachemons.io.FilenameUtils;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
SimpleDateFormat;
import java.util.Date;
@RequestMapping("file")
@RestController
public class FileController {
/**
* 传⼊的参数是MultipartFile
* 加⼊@RequestParam注解表⽰该参数⼀定要接受到，接受到的是前端的file
* 根据⾃⼰需求可以有其他参数，这⾥就演⽰⽂件上传
* @param mf
* @return
*/
@PostMapping("upload")
public String upload(@RequestParam("file")MultipartFile mf)throws IOException {
/**
* 获取项⽬绝对路径
* 最终⽂件上传是需要绝对路径的
* 相当于给要上传的位置定个坐标
* classpath：就可以去获得resources的⽬录
* 具体classpath：获得resources的原因就得⾃⼰去探索了，本⽂主要是讲⽂件上传
* 这⾥不去除first的话这个路径开头会有⼀个/，虽然没有什么影响
*/
String absPath = URL("classpath:").getPath().replaceFirst("/","")+"static/files";
/
**
* 创建⽂件⽬录
* 根据⾃⼰的需求
* 在这我就以当前时间创建
*/
SimpleDateFormat sdf =new SimpleDateFormat("yyyy-MM-dd-HH-mm");
//⽂件的⽬录应该为绝对路径+⽬录名
String dirPath = absPath+"/"+sdf.format(new Date());
//通过这个路径创建⽬录
File dir =new File(dirPath);
//如果不存在就创建该⽬录
if(!ists()){
dir.mkdirs();
}
/**
* 创建⽂件
* ⽂件名字就根据⾃⼰的需求⽽定
* 我这⾥为了⽅便，就叫cutezha吧
*/
//先获取⽂件本⾝的名字
String oldName = mf.getOriginalFilename();
//使⽤FileNameUtils获取扩展名，这⾥获取的没有.所以⼿动加上
String extension ="."+Extension(oldName);
String fileName ="cutezha"+extension;
//上传⽂件
/**
* 将数据返回给前端，我这⾥就直接将路径返回了
* 注意这⾥⽤dirPath才是斜杠，如果使⽤dir则是反斜杠
*/
return dirPath+"/"+fileName;
}
}
那么后端就完成了，其中有些可以根据⾃⼰的需求更改，下⾯就是前端，由于我本⾝前端学的⼀塌糊涂，所以注释就较少前端部分
前端部分由于学的很差，所以理解可能没后端这么好，希望指出
前端上传也可分为以下⼏步
上传⽂件到input
获取input⾥的⽂件
通过axios异步传给后端存⼊服务器本地
原⽣vue的axios异步
这⾥通过axios请求了/file/upload，下⾯直接看前端代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<script src="cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<script src="unpkg/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<form action="">
<!--给该input标签绑定了change事件，绑定到了iii并且通过$event将该标签传递进去-->
⽂件上传:: <input type="file"@change="iii($event)"ref="file">
<input type="button"@click="submitForm">
</form>
</div>
<script type="text/javascript">
const app =new Vue({
el:'#app',
data(){
return{
file:''
};
},
methods:{
submitForm:function(event){
/**
* 这句也可以获得file
* this.file = this.$refs.file.files[0];
* 甚⾄可以通过原⽣js实现
*/
//通过formdata将⽂件存⼊
//除了file，可以将想要向后端传递的参数写进fd
fd =new FormData();
fd.append("file",this.file);
axios({
url:'localhost:8080/file/upload',//所要请求的地址
data: fd,//携带的参数
method:'post',//请求⽅式
headers:{
//请求头很重要，我看见有⼈说可以不写，但我不写不⾏
'Content-Type':'multipart/form-data',
}
}).then((res)=>{
console.log(res.data);
});
},
iii:function(e){
//次函数主要是将input⾥的⽂件存⼊data⾥的file⾥
alert(e.target);
this.file=e.target.files[0];
}
}
})
</script>
</body>
</html>
运⾏效果
由于我在iii函数中弹出了⼀下
点击上传
去⽂件夹查看
使⽤elementui下的el-upload组件
不太清楚该组件的底层原理是如何实现的，这⾥就把代码贴上吧，原理还是⼀样的，但是file本来就在组件⾥⾯，就不⽤了获取了，传⼊其他你想要的参数就可以了，这⾥就不再掩饰
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link rel="stylesheet"href="unpkg/element-ui/lib/theme-chalk/index.css">
<script src="cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<script src="unpkg/element-ui/lib/index.js"></script>
<script src="unpkg/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="login-box"id="app">
<el-form >
<!--action="localhost:8181/ctbuc/file/upload"-->
springboot是啥
<el-form-item label="头像："prop="userimg">
<el-upload
class="avatar-uploader"
:show-file-list="false"
action="localhost:8080/file/upload"
:data="你要传的"
>
<img v-if="imageUrl":src="imageUrl"class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
</div>
</body>
后⾯js没啥好看的，因为都在elupload⾥处理完了
</html>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
</div>
</body>
后⾯js没啥好看的，因为都在elupload⾥处理完了
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。