前后端分离且跨域的情况下
form表单提交数据,且数据中包含文件提交上传
-
解决方法 及 步骤:
1 前端用formdata()的方式提交
let form=document.getElementById('form') var param = new FormData(form); let config = { //添加请求头 headers: { 'Content-Type':'multipart/form-data'} }; // 拿到file console.log(this.fileval); // 获取form所有数据 const instance=axios.create({ withCredentials: true }) console.log(param); instance.post('http://localhost:8090/insertWare',param,config).then(res => { console.log(res); });
2 后端用 MultipartFile方式接收file数据,其他数据和正常数据一样
public Map<String, Object> insertWare(@RequestParam("file") MultipartFile[] files, Integer user_id, String course_name, String major, Integer isuser ) throws Exception { Map<String, Object> map = new HashMap<>(); for (MultipartFile file : files) { //获取原始文件名 String ware_name1 = file.getOriginalFilename(); System.out.println("原始文件名:" + ware_name1); //新文件 String ware_name = UUID.randomUUID() + ware_name1; //获取项目路径 <!-- ServletContext context = request.getSession().getServletContext(); --> //获取上传文件的保存目录,将上传的文件存放于WEB-INF目录下 // 不允许外界直接访问,保证上传文件的安全 String address = "D:\\project\\vue-admin-master\\static\\"; File filex = new File(address); if (filex.exists() && filex.isDirectory()) {//若上传目录不存在,则创建目录 filex.mkdirs(); } String message = ""; InputStream is = null; FileOutputStream fos = null; byte[] buffer = new byte[100 * 1024];//根据上传文件大小设定 try { is = file.getInputStream();// 获得上传文件流 //创建文件输出流 使用FileOutputStream打开服务器端的上传文件 fos = new FileOutputStream(address + ware_name); int len = 0; //开始读取上传文件的字节,并将其输出到服务端的上传文件输出流中 //循环将输入流读入到缓冲区当中,(len=in.read(buffer))>0就表示in里面还有数据 while ((len = is.read(buffer)) > 0) { fos.write(buffer, 0, len);//写入到指定的目录当中 } fos.flush(); is.close(); fos.close(); message = "上传成功!" + "<br>"; message += "上传内容:" + ware_name + "<br>"; System.out.println("上传内容:" + ware_name + "<br>"); } catch (IOException e) { message = "文件上传失败!"; throw new Exception(e); } int code = wareService.insertWare(user_id,major, course_name, address, ware_name, isuser); if (code == 1) { map.put("success", "添加ware成功:" + code + "-" + message); } else { map.put("error", "添加ware失败:" + code + "-" + message); } } return map; }