- 前端使用ElementUI+Vue
- 后端使用SpringBoot
1 前端代码
1.0 组件导入&初始化
- 导入ElementUI、Axios、Vue的资源。完成Vue的初始化和生效区域的设置。这些资源都能找到，把他们放在你SpringBoot的
static文件夹下。
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
- 使用一个div包裹你的主页面，并给一个id，这就是Vue生效的区间。一般叫做
app
<body>
<div id="app">
你的代码主体
</div>
</body>
- 初始化Vue
<script>
new Vue({
el: `#app`,
data: function () {
return {
这里是你动态绑定的数据
}
},
methods: {
这里是你的函数
}
});
</script>
1.1 html
直接使用的是ElementUI提供的上传功能。
<el-upload
class="upload-demo"
drag
action="/common/uploadTrain"
:on-success="handleUploadSuccess"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:before-upload="beforeUpload"
:on-exceed="handleExceed"
:file-list="fileList"
:show-file-list="true"
:limit="1"
ref="upload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">Drag your file here, or <em>click to upload</em></div>
<div class="el-upload__tip" slot="tip">FASTA sequence file only, limited 2MB</div>
</el-upload>
- el-upload的参数在ElementUI中都有详细的说明，详见：https://element.eleme.io/#/zh-CN/component/upload ，这里主要说一下action和钩子函数。
- action对应的就后端接口，就是这个文件上传请求发送到后端的哪里来处理
- 钩子函数，on-xxx和before-xxx，一般做一些文件格式/大小校验，上传成功的通知，
这些函数的使用官网中都有模板。值得注意的是beforeRemove和handleRemove需要加上一个if (file && file.status === "success")的判断，否则可能会出现错误。
2 后端代码
刚刚，我们的接口写的是/common/uploadTrain。上传是一个通用的功能，不属于某一个实体专有，我们就新建一个CommonController，专门写这些能够复用的Controller。
这个请求不是我们axios自己写的，而是el-upload做的，底层是一个post form表单，后端需要使用MultipartFile类作为参数。
@RestController
@RequestMapping("/common") //
public class CommonController {
// 转存根目录 使用读取配置方式获取
@Value("${bio.uploadPath}")
private String basedir;
/**
* 上传文件 用户从本地上传到服务器
* @param file
* @return filename
*/
public String upload(MultipartFile file){
//1. 获取原始文件名
String originalFilename = file.getOriginalFilename();
String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")); // 获取文件后缀
//2. 使用UUID重新生成文件名，防止文件名称重复造成文件覆盖
String fileName = UUID.randomUUID().toString() + suffix;
//3. 创建一个目录对象
File dir = new File(basedir);
//4. 判断当前目录是否存在
if(!dir.exists()){
//若目录不存在，需要创建
dir.mkdirs();
}
try {
//5. 将临时文件转存到指定位置
file.transferTo(new File(basedir + fileName));
return fileName;
} catch (Exception e) { // 上传出现问题直接抛出系统异常，不属于业务范围
throw new SystemException("Upload failed, please check your network", Code.SYSTEM_ERR);
}
}