文件上传--前端Vue后端springboot

前端调用：

<template>
  <div>
    <el-upload
        class="upload-demo"
        :auto-upload="false"
        drag
        :on-change="handleChange"
        action="#">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

    <div>
      <el-button @click="upload()">上传</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return {
      // -----图片上传
      uploadForm: {
        file: '',
        vulnId: 1
      }
    }
  },
  methods:{
    // 文件变动
    handleChange(file) {
      this.uploadForm.file = file.raw  // 这个就是咱们上传图片的二进制对象
    },
    // 上传图片
    upload() {
      const config = { headers: { 'Content-Type': 'multipart/form-data' }}
      axios.post("http://127.0.0.1:9090/upload/demo",this.uploadForm, config)
          .catch(error => {
            console.error(error);
          });
    }
  }

}
</script>

后端接口：

import com.enst.toolset.config.handler.HttpGlobalError;
import org.apache.commons.io.FileUtils;
import org.springframework.web.multipart.MultipartFile;
import io.swagger.annotations.*;
import org.springframework.web.bind.annotation.*;

import java.io.File;
import java.io.IOException;

@RestController
@RequestMapping("/upload")
public class ScriptController {

    @ApiOperation(value = "上传脚本")
    @PostMapping(value = {"/demo"})
    public void demo(@ApiParam(required = true, value = "脚本") @RequestParam(value = "file") MultipartFile file, Integer vulnId) {
        // 自己的业务逻辑根据vnId生成path
        String realPath = "";
        try {
            String fileName = file.getOriginalFilename();
            FileUtils.copyInputStreamToFile(file.getInputStream(), new File(realPath, fileName));
        } catch (IOException e) {
            throw e;
        }
    }
}