SpringBoot+ElementUI文件上传
-
新建项目
-
SpringBoot后端Coding…
-
@RequestMapping("/upload") public Object upload(@RequestParam(value = "file") MultipartFile multipartFile) throws IOException { log.info("文件上传"); System.out.println("multipartFile = " + multipartFile); if (ObjectUtil.isNotNull(multipartFile)) { System.out.println("multipartFile = " + multipartFile); InputStream inputStream; BufferedOutputStream bos; final String name = multipartFile.getOriginalFilename(); log.info("fileName = " + name); inputStream = multipartFile.getInputStream(); bos = new BufferedOutputStream(new FileOutputStream(Objects.requireNonNull(name))); byte[] bytes = new byte[1024]; int len; while ((len = inputStream.read(bytes)) != -1) { bos.write(bytes, 0, len); } return new Result().ok("200", name + "上传完成", name); } return new Result().err("4444", "文件不能为空", null); }
-
@RequestParam(value = "file")
要加上这个注解,说明请求参数的key是file,要是不加这个可能会导致MultipartFile
报空指针异常。 -
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PhrysB1F-1643089577275)(C:\Users\mucd\AppData\Roaming\Typora\typora-user-images\1643089429154.png)]
-
-
Vue前端Coding…
-
<el-upload class="upload-demo" action="http://localhost:8080/file/upload" list-type="picture"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload>
-
action
属性就是后端的文件上传的接口,写成自己的Controller接口就可以。 -
文件是以
post
方式发送给后端的 -
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DuVJ6Ed7-1643089577277)(C:\Users\mucd\AppData\Roaming\Typora\typora-user-images\1643089494000.png)]
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HC5fs4Z6-1643089577278)(C:\Users\mucd\AppData\Roaming\Typora\typora-user-images\1643089455298.png)]
-