一、前端：

1、在封装好的axios接口：

import axios from 'axios'axios.defaults.withCredentials = true;// 允许跨域携带cookie// 创建axios实例
const request = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: 'http://localhost:8088/zupu',// 超时取消timeout: 5000,// 设置Content-Type，规定了前后端的交互使用json// headers: {'Content-Type': 'application/json;charset=utf-8'}
})
export default request

2、在子文件中写接口请求配置

import request from "@/api";let token=window.localStorage.getItem("zupu-token")
// 动态发布，上传图片
export function insetDyMyImg(datas) {return request({url: '/inset/file',method: 'post',data: datas,params: {token: token,},headers: { 'Content-Type': 'multipart/form-data' }})
}

3、.vue文件中调用接口：

（1）引入接口：

import {insetDyMyImg} from '@/api/dynamic/dymy'

（2）调用接口：

let formdata = new FormData();
formdata.append("fileimg", file);
insetDyMyImg({
fileimg:file
}).then( res => {console.log(res.data)
}).catch( err => {console.log(err)
})

二、SprinBoot后端

拦截器：

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {response.setContentType("text/html;charset=utf-8");    //包含第一种方式的两个功能request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");response.setContentType("text/html; charset=UTF-8");response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));//支持跨域请求response.setHeader("Access-Control-Allow-Methods", "*");response.setHeader("Access-Control-Allow-Credentials", "true");//是否支持cookie跨域response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-            Requested-With, Content-Type, Accept,Access-Token");//Origin, X-Requested-With, Content-    Type, Accept,Access-TokenString token = request.getParameter("token");System.out.println("拦截器=》用户提交koken："+token);//判断token是否存在if(redisUtil.hasKey(token)) {System.out.println("拦截器=》用户提交koken："+token);return true;}request.getReader();System.out.println("拦截器=》token不通过!");returnData(response,2000,"您长时间未操作，请重新登录");return false;
}

vue fromData提交表单(文件)的同时 axios通过将token封装一起发送，Springboot后端拦截器通过request.getParameter获取，Redis验证token相关推荐

Vue.js 提交表单
QQ:285679784 欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习 ! <!DOCTYPE html> <html> <he ...
Vue如何提交表单数据
一.前言之前写React的时候,因为数据是单向绑定,所以提交表单的时候,有一个去获取表单数据的过程.所以在使用Vue的时候还是摸索了很长时间才搞懂Vue的v-model双向数据绑定. 二.例子 (1 ...
用multipart/form-data提交表单文件数据获取不了解决办法
在学习Servlet文件上传方面遇到了一个问题,就是通过multipart/form-data这个表单类型提交要上传的文件的时候,Servlet用request.getParameter()方法获取非 ...
vue自动提交表单_vuejs 动态提交form表单问题
通过v-for动态循环某个对象,添加隐藏的元素到form中,然后通过 document.getElementById('form').submit()来提交,此时发现另一个页面接收不到参数. 而通过d ...
vue 传递对象路由_javascript – 如何在Vue中提交表单,重定向到新路由并传递参数？...
< form>的默认行为是重新加载页面onsubmit.在实施SPA时,最好避免调用< form>的默认行为. 利用nuxtjs中现成的路由器模块,可以使所有重定向控件在应用程 ...
vue自动提交表单_(尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)...
自动收集,就是我一输入数据,就自动收集,等我点击提交按钮的时候,数据就收集好了 1.使用v-model对表单数据自动收集 1)text/textare----单行/多行输入框 2)checkbox-- ...
Vue 如何提交表单数据
<body><form><input type="text" value="" v-model="name" ...
Jquery.form自动提交表单上传图片
先引入相关js文件 1 2 <script type="text/javascript" src="jquery-1.7.2.min.js">< ...
vue中form表单支持回车键提交踩坑
平时我们项目中的列表页面通常都有条件搜索,为了使用方便通常都会支持回车搜索. 此功能的实现普遍做法是:为form表单添加 @keydown.enter.native="自定义方法名称&quo ...

vue fromData提交表单(文件)的同时 axios通过将token封装一起发送，Springboot后端拦截器通过request.getParameter获取，Redis验证token

一、前端：

1、在封装好的axios接口：

2、在子文件中写接口请求配置

3、.vue文件中调用接口：

（1）引入接口：

（2）调用接口：

二、SprinBoot后端

vue fromData提交表单(文件)的同时 axios通过将token封装一起发送，Springboot后端拦截器通过request.getParameter获取，Redis验证token相关推荐

最新文章

热门文章