常规文件上传与下载

最新推荐文章于 2024-09-14 15:19:40 发布

前端小白，请多指教

最新推荐文章于 2024-09-14 15:19:40 发布

阅读量140

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_58709757/article/details/124293409

版权

本文介绍了如何使用axios进行常规文件上传和通过POST请求下载Excel文件，包括设置header、interceptor以及处理文件上传。同时展示了如何在上传和下载过程中处理token验证和后端返回的数据封装。

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

/**
 * 常规文件上传
 */
 import axios from 'axios';
 import { baseUrl } from '@/config/index'
 import store from '@/store/index'
 
 const upload = axios.create({
     baseURL: baseUrl, //服务器地址
     headers: {
         'Content-Type': 'multipart/form-data', // 设置为文件类型
         Authorization: store.state.utils.token,
         appId: store.state.utils.appId
     },
 })
 upload.interceptors.request.use(config => {
     // 如果有token类似的，就加类似代码
     // const token = localStorage.getItem('token')
     // if (token) {
     //     config.headers['Authorization'] = 'Bearer ' + token
     // }
     return config
 }, error => {
     return Promise.reject(error)
 })
 
 /**
  * 文件上传
  * @param {*} url 路径
  * @param {*} params 请求参数
  * @param {*} config 其余配置
  * @returns 
  */
 const Upload = function (url,params,config = {}) {
     var file = new FormData()
     for(let i in params){
        file.append(i, params[i])
     }
     return upload.post(url,file, config)
 }
 export default Upload

import axios from 'axios'
import {
    baseUrl
} from '@/config/index'
import store from '@/store/index'
import {
    Message
} from 'element-ui'
import {
    downFile
} from '@/utils/download/download'


export const downExcelByPost = function (url, options, name = 'user') {
    const token = store.state.utils.token;
    const appId = store.state.utils.appId;
    return axios({
            method: 'POST',
            url: `${baseUrl}${url}`,
            headers: {
                'content-type': 'application/x-www-form-urlencoded',
                Authorization: token,
                appId: appId
            },
            params: options || null,
            responseType: 'blob'
        })
        .then(res => {
            let data = res.data; // 这里后端对文件流做了一层封装，将data指向res.data即可
            if (!data) {
                return;
            }
            downFile(`${name}.xlsx`, new Blob([data]));
        })
        .catch(err => {
            Message.error(err);
        });
};