封装axios请求，上传头像

最新推荐文章于 2023-03-19 21:30:07 发布

mfxcyh

最新推荐文章于 2023-03-19 21:30:07 发布

阅读量377

点赞数

分类专栏： axios 项目文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/mfxcyh/article/details/125242967

版权

项目同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

axios

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue.js项目中创建一个`common/utils`模块，用于数据的本地存储和删除，以及创建一个`network`模块，其中包含一个axios实例，设置请求拦截器处理登录令牌。同时，展示了在组件中如何导入并使用这些功能进行数据的获取、创建、更新和删除操作，以及图片上传功能。涉及到的技术包括Vue.js、Axios、本地存储和文件上传。

摘要由CSDN通过智能技术生成

在src目录下新建/common/utils/index.js文件

const Base64 = require('js-base64').Base64

const utils = {
    /**
     * 数据持久化
     */
    localSetItem(key, value) {
        window.localStorage.setItem(Base64.encode(key), Base64.encode(value))
    },
    /**
     * 移除持久化数据
     */
    localRemoveItem(key) {
        window.localStorage.removeItem(Base64.encode(key))
    },

    /**
     * 获取持久化数据
     */
    localGetItem(key) {
        let value = window.localStorage.getItem(Base64.encode(key))
        if (!value) {
            return value
        }
        return Base64.decode(value)
    }


}

export default utils

在src目录下新建network目录，在该目录下新建index.js

import axios from 'axios'
import utils from "../common/utils";

export function request(config) {

    const instance = new axios.create({
        baseURL: 'http://150.158.36.242:10030',
        timeout: 8000,
        headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
    });

    //请求拦截器
    instance.interceptors.request.use(config => {
        let token = utils.localGetItem('token')
        if (token) {
            config.headers.Authorization = "Bearer" + ' ' + token
        }
        return config
    }, error => {
        return error
    })
    instance.interceptors.response.use(res => {
        return res
    }, error => {
        let data = error.response.data
        if (data.code === 40301) {
            utils.localRemoveItem('token')
            alert('你的登录已经过期了！')
            window.location.href = '/login'
        }
        return Promise.resolve(error.response)
    })
    return instance(config)
}

在该目录下新建相应请求模块

team.js

import {request} from './index'

export default {
    CreateTeam(teamInfo){
        return request({
            url:'/team/create',
            method:'post',
            data:teamInfo
        })
    },
    //刷新列表
    GetList(current_page){
        return request({
            url:'/team/list',
            method: 'get',
            params:{
                current_page
            }
        })
    },
    // 创建团队 头像上传
    UpLogo(file){
        return request({
            url:'/upload/team_logo',
            method: 'post',
            data:file
        })
    },
    //搜索得到的列表
    SelectList(leader_id){
        return request({
            url:`/team/leader_info?leader_id=${leader_id}`,
            method: 'get',
        })
    }
}

在需要发送该模块请求的vue文件中引入

import API from '../../network/team'

请求实现

//刷新列表
getList() {                    
    API.GetList(this.queryInfo.pageNum).then(res=>{
        this.rolesList = res.data.data.data 
        this.queryInfo.pageNum = res.data.data.current_page
        this.queryInfo.pageSize = res.data.data.currentPageSize
        this.queryInfo.total = res.data.data.total
        console.log(this.rolesList)
    })     
},

//增加用户
addUser(){
    API.CreateTeam(this.addForm).then(res=>{
        console.log(res)
        if(res.data.code === 200){
            this.$message.success("团队创建成功")
            this.getList()
            this.$router.push("team")
        }else {
            this.$message.error("团队创建失败")
        }
    })
},

上传头像

updateLogo(item){
                
    //验证图片格式大小信息             
    const isJPG = item.file.type == 'image/jpeg' || item.file.type == 'image/png';
    const isLt2M = item.file.size / 1024 / 1024 < 2;
    if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
    }
    if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
    }
                
    //图片格式大小信息没问题 执行上传图片的方法
    if (isJPG && isLt2M == true) {
    
    // post上传图片
    let App = this;
        
    //定义FormData对象 存储文件
    let mf = new FormData();
                    
    //将图片文件放入mf
    mf.append('file', item.file);
    console.log(mf)
    API.UpLogo(mf).then(res => {
        console.log(res)
        App.addForm.logo = res.data.data
        console.log(App.addForm.logo)
    })
                    
},

handleAvatarSuccess(res, file) {
    this.addForm.logo = URL.createObjectURL(file.raw);
},

beforeAvatarUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
    }
    if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
},

<el-upload
    v-loading="loading"
    class="avatar-uploader"
    action="lll"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :http-request="updateLogo"
    :before-upload="beforeAvatarUpload"
>
    <img v-if="addForm.logo" :src="addForm.logo" class="avatar">
    <h1 v-else class="el-icon-plus avatar-uploader-icon">+</h1>
</el-upload>