1. java
@Controller
public class FileUploadController {
SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
@ResponseBody
@PostMapping("upload")
public Map<String, Object> upload(@RequestParam("file") MultipartFile file, HttpServletRequest request){
HashMap<String, Object> result = new HashMap<>();
String originalFilename = file.getOriginalFilename();
if (!originalFilename.endsWith(".pdf")){
result.put("status", "error");
result.put("msg", "文件类型错误");
return result;
}
String format = sdf.format(new Date());
String realPath = request.getServletContext().getRealPath("") + format;
System.out.println(realPath);
File folder = new File(realPath);
if (!folder.exists()){
folder.mkdirs();
}
String newName = UUID.randomUUID().toString() + ".pdf";
try {
file.transferTo(new File(folder, newName));
String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + format + newName;
result.put("status", "success");
result.put("url", url);
} catch (IOException e) {
result.put("status", "error");
result.put("msg", e.getMessage());
}
return result;
}
}
2. vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-upload
action="/upload"
:on-preview="handlePreview"
multiple
:limit="10"
accept=".pdf">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传pdf文件，且不超过10MB</div>
</el-upload>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
methods: {
handlePreview(file){
window.open(file.response.url)
}
}
})
</script>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
