spring boot 整合 上传功能

• application 配置

spring:
    servlet:
      multipart:
        max-file-size: 10MB
        max-request-size: 10MB

 

• pom 文件依赖

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>

 

• server 使用

@RequestMapping("/upload")
public JSONObject upload(@RequestParam("file") MultipartFile file, HttpServletRequest request){
    JSONObject result = new JSONObject();
    // 姓名
    String name = request.getParameter("name");
    System.out.println("姓名：" + name);
    // 文件名
    String fileName = file.getOriginalFilename();
    System.out.println("文件名： " + fileName);
    // 文件后缀
    String suffixName = fileName.substring(fileName.lastIndexOf("."));
    System.out.println("文件后缀名： " + suffixName);
    // 重新生成唯一文件名，用于存储数据库
    String newFileName = UUID.randomUUID().toString()+suffixName;
    System.out.println("新的文件名： " + newFileName);
    //创建文件
    File dest = new File(filePath + newFileName);
    Map map = new HashMap();
    map.put("filePath", dest.getAbsolutePath());
    map.put("name", name);
    try {
        file.transferTo(dest);
        result.put("success", true);
        result.put("data", map);
        return result;
    } catch (IOException e) {
        e.printStackTrace();
    }
    return (JSONObject) result.put("success", false);
}

 

• web 端实现（vue）

<template>
  <div class="app-container">
    <el-upload
      ref="upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :auto-upload="false"
      :action="action"
      class="upload-demo">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      fileList: [],
      action: '/bc/test/upload'
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`)
    }
  }
}
</script>