SpringBoot上传文件

前端使用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);
            }
    }