VUE post 请求 get请求

post

axios.post(url,{"name":this.phoneBook.name,"phone":this.phoneBook.phoneNumber,"tele":this.phoneBook.teleNumber,"workAddress":this.phoneBook.workAddress,"homeAddress":this.phoneBook.homeAddress,"img":this.phoneBook.image,"remark":this.phoneBook.remark})
  .then(response=>{
    if(response.data.success){
      alert("添加成功")

      PubSub.publish('refreshPhoneBook',"");
      this.$router.replace('/phoneBook');
    }else{
      alert(response.data.msg)
    }
  }).catch(error=>{
  alert(error)
})

get

getPhoneBook(){
 let token = window.localStorage.getItem("token");
  let url = getServerUrl("api/vue/phone/book/list");
  //把token放到请求的headers当中
  axios.defaults.headers.common["token"] = token;
  axios.get(url).then(response=>{
    console.log(response.data.data);
    this.phoneBooks = response.data.data;

  }).catch(err=>{
    console.log(err);
  })
}

上传图片方式

<input @change="update" style=" position: absolute; left: 0; opacity: 0;  width: 5%; height: 5%;" type="file" ref="input">



update(e){
  let file  = e.target.files[0];
  let param = new FormData();
  param.append("file",file,file.name);
  param.append("xxx",122);
  console.log(param.get('file'));
  console.log(param.get('xxx'));

  let token = window.localStorage.getItem("token");
  let url = getServerUrl("api/vue/phone/book/add_imageUrl");
  //axios.defaults.headers.common["token"] = token;
  let config = {
    headers: {'Content-Type':'multipart/form-data','token':token}
  }

  axios.post(url,param,config)
    .then(response=>{
      console.log(response.data);
      this.phoneBook.image = response.data.path;
    }).catch(err=>{
    console.log(err);
  })

}

上传图片后台代码

/**
	 * /api/vue/add_imageUrl
	 */
	@ResponseBody
	@RequestMapping("/api/vue/add_imageUrl")
	@CrossOrigin
	public JSONObject add_imageUrl(MultipartFile file, HttpServletRequest request) throws Exception {
	        JSONObject result = new JSONObject();
	        System.out.println("上传图片");
	        if(!file.isEmpty()){
	            String webPath=request.getServletContext().getRealPath("");
	            String filePath= "/static/upload_image/vue_img_cover/"+DateUtil.formatDate(new Date(), "yyyyMMdd")+"/";
	            //把文件名子换成（时间搓.png）
	            String fileName= file.getOriginalFilename();
	            String suffixName= fileName.split("\\.")[1];//后缀
	            String newFileName  = DateUtil.formatDate(new Date(), "yyyyMMddHHmmss")+"."+suffixName;
	            //检测   文件夹有没有创建 
	            FileUtil.makeDirs(webPath+filePath);
	            String newFileName2=DateUtil.formatDate(new Date(), "yyyyMMddHHmmss")+".jpg";
	            file.transferTo(new File(webPath+filePath+newFileName));
	            //FileUtils.copyInputStreamToFile(source, destination);
	            result.put("success", true);
	            result.put("msg", "上传成功");
	            result.put("fileName", newFileName);
	            result.put("path", filePath+newFileName);
	        }else {
	        	result.put("success", false);
		        result.put("msg", "文件不存在");
	        }
	        return result;
	}