13、分享-文件上传 13、分享-文件上传

目标

自动上传
手动上传
文件个数限制（如果个数超过时，给用户一个提示）
文件与基本信息关联时，带普通参数
文件上传，携带form表单信息

自动上传参考element-ui拖拽上传

@PostMapping("/multiUpload4Param") @ResponseBody public String multiUpload4Param(HttpServletRequest request,String name,String age,MultipartFile[] file,String c_id) { System.out.println(name); System.out.println(age); List files = ((MultipartHttpServletRequest) request).getFiles("file"); String filePath = request.getRealPath("/upload"); for (int i = 0; i < files.size(); i++) { MultipartFile fileitem = files.get(i); if (fileitem.isEmpty()) { return "上传第" + (i++) + "个文件失败"; } String fileName = fileitem.getOriginalFilename(); File dest=new File(filePath,fileName); try { fileitem.transferTo(dest); LOGGER.info("第" + (i + 1) + "个文件上传成功"); } catch (IOException e) { LOGGER.error(e.toString(), e); return "上传第" + (i++) + "个文件失败"; } }return "上传成功"; }

跨域权限设置

package com.neuedu.demo.config; import static org.springframework.web.cors.CorsConfiguration.ALL; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.http.HttpHeaders; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration @ComponentScan(basePackages={"com.neuedu.demo"}) public class SpringConfig { //增加跨域权限配置 @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { // 限制了路径和域名的访问 /*registry.addMapping("/api*").allowedOrigins("http://localhost:8081"); */ //设置允许跨域的路径 registry.addMapping("/**") //设置允许跨域请求的域名 // .allowedOrigins(ALL) //设置允许跨域请求的域名,如果想要传递cookie,就不能再用* .allowedOrigins("http://localhost:8080") //是否允许证书不再默认开启 .allowCredentials(true) //设置允许的方法 .allowedMethods(ALL) //设置允许的header .allowedHeaders(ALL) //.exposedHeaders(HttpHeaders.SET_COOKIE, "token") //跨域允许时间 .maxAge(3600); } }; } }

手动控制上传参考element-ui手动上传

ref="upload" :auto-upload="false"上传到服务器methods:{ submitUpload() { this.$refs.upload.submit(); }

文件个数控制参考element-ui 点击上传

:limit="2" :on-exceed="handleExceed"handleExceed(files, fileList) { this.$message.warning(`当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); }

把文件与指定内容ID关联本质上是实现上传时带普通参数
【13、分享-文件上传】：data属性可以带参数（我用form代替）

:data="https://www.it610.com/article/{ c_id: this.form.c_id }"data() { return { form:{ c_id:'123' } }; }

完整代码

文件上传带form

package com.neuedu.demo.controller; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; @RestController @RequestMapping("/upload") public class FileUpload { @PostMapping("simple") public String simpleUpload(MultipartFile[] file,String name,String age) { String result = ""; //打印文件上传的原始文件名 System.out.println(file[0].getOriginalFilename()); return result; } }