每日总结4.23
看了很多关于文件上传的帖子，感觉写的都很复杂，于是做了一个总结，写个精简版，希望对大家有所帮助。
前端选用<input type="file">原生组件，实现该组件美化与图片预览功能。
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/test.js"></script>
<title>文件上传</title>
<style>
.myBtn{
padding: 5px 10px;
background: rgb(92,184,92);
color: white;
outline: none;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<input type="file" id="file" style="display: none" onchange="upload(this)">
<button class="myBtn" onclick="fileBtn()">
上传文件
</button>
<img src="" id="img" style="width: 200px">
</body>
</html>
function fileBtn() {
document.getElementById('file').click()
}
function upload(file) {
let img = document.getElementById('img')
let formData = new FormData()
let temp = file.files[0]
if (temp){
formData.append('file',temp)
img.src = window.URL.createObjectURL(temp)
$.ajax({
url:"/test/file2",
type:"POST",
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function(result){
alert(result);
}
})
}
}
这里用了一个小技巧，原生的样式不是丑吗，那就隐藏它，就调用他的方法就好了，如果不想onchange触发想要点击提交等等只要稍作修改，大家可以自行发挥，我对button做了个简单的样式，大家可以根据自己项目的需求修改样式。window.URL.createObjectURL()方法可以实现对图片预览，当然这里传输任何格式的文件都是可以的，这里要是用vue或者其他框架思路也是一样的，这样前端就完成了。
后端代码Spring版：
@RestController
@RequestMapping("/test")
public class TestController {
@PostMapping(value = "/file2")
public String uploadFile(@RequestParam("file") MultipartFile file){
String fileName = file.getOriginalFilename();
String suffix = fileName.substring(fileName.lastIndexOf('.'));
String newFileName = new Date().getTime() + suffix;
String path = "E:/test/";
File newFile = new File(path + newFileName);
try {
file.transferTo(newFile);
return "成功";
}
catch (Exception e){
e.printStackTrace();
return "失败";
}
}
}
@Configuration
public class FileUpload {
@Bean
public MultipartConfigElement multipartConfigElement(){
MultipartConfigFactory factory = new MultipartConfigFactory();
factory.setMaxFileSize("10MB");
factory.setMaxRequestSize("10MB");
return factory.createMultipartConfig();
}
}
@RequestParam("file")中的"file"为前端formdata里的"file"，配置文件可以配置上传文件大小，这里suffix为文件后缀名，我用了时间戳作为新文件名（保证不会重复），大家可以根据自己的需求修改文件名。怎么样，是不是很简洁？
不用Spring的话，网上也有很多教程，这就不描述了。
最终效果图：
