• vue + springboot前后端分离图片无法实现上传


    前端我对axios做了封装,代码如下:
    import axios from 'axios'
    import { useUserStore } from '@/stores'
    const baseURL = 'http://localhost:8080'

    const instance = axios.create({
      baseURL,
      timeout: 100000
    })

    // 请求拦截器
    instance.interceptors.request.use(
      (config) => {
        const useStore = useUserStore()
        if (useStore.token) {
          config.headers.Authorization = useStore.token
        }
        return config
      }
    )

    // 响应拦截器
    instance.interceptors.response.use(
      (res) => {
        // code为1表示服务器端操作成功
        if (res.data.code === 1) {
          return res
        }
        // 处理业务失败, 给错误提示,抛出错误
        ElMessage.error(res.data.msg || '服务异常')
        return Promise.reject(res.data)
      },
      (err) => {
        // 错误的特殊情况 => 401 权限不足 或 token 过期 => 拦截到登录
        if (err.response?.status === 401) {
          router.push('/login')
        }

        // 错误的默认情况 => 只要给提示
        ElMessage.error(err.response.data.message || '服务异常')
        return Promise.reject(err)
      }
    )
    export default instance
    上传组件代码


    user.js代码
    import request from '@/utils/request'
    // 登录
    export const userLogin = (user) => request.post('/login',user)
    // 获取用户信息
    export const userInfo = () => request.get('/emps/userInfo')
    // 更新头像
    export const updateAvatar = (avatar) => request.patch('/emps/updateAvatar',{avatar},{
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
    后端接收代码
    @PatchMapping("/updateAvatar")
    public Result updateAvatar(@RequestHeader("authorization") String token,MultipartFile uploadFile) throws IOException {
        Claims claims = JwtUtils.parseJWT(token);
        Emp emp = empService.getById((int)claims.get("id"));
        // 上传头像
        String url = aliOSSUtils.upload(uploadFile);
        emp.setImage(url);
        return Result.success();
    }
     

  • 相关阅读:
    51万奖池邀你参战——第二届阿里云ECS CloudBuild开发者大赛来袭
    LVS+KeepAlived高可用部署实战应用
    defer和async区别
    React 18 + Babel 7 + Webpack 5 开发环境搭建
    数组扁平化 和 线性结构(数组)转换树结构
    CV 面试指南—深度学习知识点总结(5)
    SH-CST 2022丨SpeechHome 语音技术研讨会
    Spring Security权限管理
    【C++进阶(六)】STL大法--栈和队列深度剖析&优先级队列&适配器原理
    插值搜索简介
  • 原文地址:https://blog.csdn.net/tanlei_accp/article/details/133902265