文件上传

前后端分离且跨域的情况下

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

转载自(https://blog.csdn.net/weixin_44294593/article/details/103070687)