Vue3 + element-plus + axios 文件传不到后端的问题

1. 问题

        使用ele-plus中的el-upload的组件传文件的时候,有后端收不到文件的问题。

2. 解决

        搜的解决方案是,使用axios发送请求的时候,在请求头中加上'Content-Type': 'multipart/form-data'(较新版本的axios会自己判断),我加了之后也没解决,在弄了好长一段时间后,想起来自己在封装了一层request,用于token的校验

import axios from "axios"; //引用axios
import { useUserStore } from '../stores/useUserStore'


axios.defaults.timeout = 5000

axios.defaults.baseURL = "http://localhost:8080"


const service = axios.create({
    timeout: 5000,
    baseUrl: "http://localhost:8080"                   // 我们在请求接口的时候就不同写前面 会自动我们补全
})

/**请求拦截器 */
service.interceptors.request.use(
    config => {
        const {getUserInfo} = useUserStore()
        const token = getUserInfo().token
        config.data = JSON.stringify(config.data);     // 这里我们也可以在过滤下 请求参数数据
        config.headers = {
            // 设置请求头
            "Content-Type": "application/json"
        };
        if (token) {
            config.headers.token =  token;            //存在的话 就携带 token
        }
        return config;                                //然后把配置返回
    },
    err => {
        console.log(err)                              //如果出错的话 打印出来错误看看
    }
);

/**响应拦截器 */
service.interceptors.response.use(
    response => {
        return response;
    },
    err => {
        if(err.response.status === 401){
            window.location.href = "/login"
        }
    }
);
export default service; 

这里的请求头中的  "Content-Type": "application/json",无论在外面修改成怎么样,它的content-type都是 “applicantion-json”,所以后端也就收不到发送的请求。

3. 总结

        纯属自己的问题。。。。。。

        

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值