前端调用:
<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;
}
}
}