java：图片的上传，本地存储，回显

vv 

    @PostMapping("/upload")
    public Result upload(MultipartFile file, HttpServletRequest request) throws IOException {
//        拿取请求头中的token，解析到username
        String token=request.getHeader("Authorization");
        Map<String,Object> map=jwtutil.parsetoken(token);
        String username= map.get("username").toString();

//        给拿取到的图片进行加工,存入本地文件
        String aa = file.getOriginalFilename();
//        给图片给予唯一名字
        String filename= UUID.randomUUID().toString()+aa.substring(aa.lastIndexOf("."));
//         存入地址
        file.transferTo(new File("D:\\javakaifagongju\\图片\\"+filename));
//        获取老头像的名称，如果要更改新头像把老头像删除
        dfdfs dfdfs=mapper.select(username);
        System.out.println(dfdfs);
        String oldname=dfdfs.get头像名称();
        System.out.println(oldname);
        File file2=new File("D:\\javakaifagongju\\图片\\"+oldname);
        file2.delete();
//        url为老头像地址
        String url="http://localhost:8088/img/"+filename;
//        存入数据库
        mapper.updata(url,username,filename);
//        System.out.println(url);



        return Result.success("sd");


    }

上传图片的后端接口

@Configuration

public class webMvCConfig implements WebMvcConfigurer {
    @Autowired
    private Logininterceptor logininterceptor;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/img/**").addResourceLocations("file:D:\\javakaifagongju\\图片\\");
    }

这个是静态资源映射，使Java可以访问D文件下下面的东西，映射路径为/img/**】

public class jwtutil {
//    Map为集合,一个集合两个类型的参数String和Object
    public static String grtToken(Map<String, Object> claims){
        return JWT.create().withClaim("claims",claims)
                .withExpiresAt(new Date(System.currentTimeMillis()+1000*60*60*12))
                .sign(Algorithm.HMAC256("qwer"));
    }
    public static Map<String,Object> parsetoken(String token){
        return JWT.require(Algorithm.HMAC256("qwer"))
                .build()
                .verify(token)
                .getClaim("claims")
                .asMap();
    }
}

这是token的生成和token的解析

@Component
@CrossOrigin
public class Logininterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String method = request.getMethod();	//输出 OPTIONS/GET/POST。。。
//如果是 OPTIONS 请求，让 OPTIONS 请求返回一个200状态码
        if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
            return true;
        }

        String token =  request.getHeader("authorization");
        try{
            Map<String,Object> claims = jwtutil.parsetoken(token);
            return true;
        } catch (Exception e){
            response.setStatus(401);
            return false;
        }
    }
}

这个是验证前端是否携带token，如果携带放行，如果未携带拦截

public class webMvCConfig implements WebMvcConfigurer {
    @Autowired
    private Logininterceptor logininterceptor;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/img/**").addResourceLocations("file:D:\\javakaifagongju\\图片\\");
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(logininterceptor).excludePathPatterns("/login","/hello1","/hello","/img/*");

    }
}

这个是在addInterceptors注册验证方法，excludePathPatterns是放行的接口

前端：

action为后端的接口，accept为允许的文件类型，on-success为成功回调的函数，headers为携带的请求头

<el-upload
  class="avatar-uploader"
  action="http://localhost:8088/upload"
  accept=".png,.jpg"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :headers="{'authorization':abc}"

  >
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i  class="el-icon-plus avatar-uploader-icon"></i>
  
</el-upload>

data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        imageUrl: '',
        abc:this.$store.state.token
      };
    },

 vue2定义参数是在data()里的

这是登录成功后的操作

1.切换路由

2.将后端的token存入Vuex

else if(res.code==1){
        alert("登录成功")
         this.$router.push({path:"/login"})
         this.token=res.data
         console.log(this.token)
         this.$store.commit('set_token', this.token)
         const aaa= this.$store.state.token
         console.log(aaa)
        //  console.log(sad)
        
        
      }

这是Vuex的代码

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        count:1,
        token:'',
        idCard:'',
    
    },
    mutations: {
        set_token(state, token) {
            state.token = token
            localStorage.token = token
        },
        //localStorage删除token
        del_token(state) {
            state.token = ''
            localStorage.removeItem('token')
        },
    
    }

  })
  export default store

import store from './stores/token'




new Vue({
  render: h => h(App),
  router:router,
  store:store,

注册进mian.js

头像回显：

前端：

在create拿取存入数据库的url

    
    async created(){
      const url=await first(this.abc)
      this.imageUrl=url
    },

axios接口

export function first(abc){
  return axios.get("http://localhost:8088/first",{headers:{'authorization':abc}}).then(res=>{
      // console.log(res.data.头像)
      return res.data.头像
    })
}

java：

    @GetMapping("/first")
    public dfdfs first(HttpServletRequest request){
        String token=request.getHeader("Authorization");
        Map<String,Object> map=jwtutil.parsetoken(token);
        String username= map.get("username").toString();
        return mapper.select(username);
    }