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

朴灿烈づ我的快乐病毒、 2024-03-22 13:11 96阅读 0赞

前端调用：

<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;
            }
        }
    }