vue 下载文件流导致文件损坏

时间：2025-02-27 16:41:27

场景：

VUE工程，后端接口返回文件流，前端下载导致文件损坏

原因分析：

分析是返回的数据流有丢失，所以在上面的代码段将返回的res的结果给打印出来。

  1. 发现返回的data是一串乱码，并不是blob格式的文件流。
  2. 通过这个情况，在网上搜了半天，才发现是Mockjs污染了responseType,默认会将responseType乱码
  3. 但是这样只适合个人开发，实际上协同开发，或者用Jenkins自动部署时，会从npm下载Mockjs的源码，还是会有问题，那么怎么在不改Mockjs源码的情况下，解决该问题呢？

 解决方案：

import request from '@/utils/axios'

export function outExcel(query) {
  return request({
    url: '/legal_aid/legalaidreportjg/outExcel',
    responseType: "arraybuffer",
    method: 'post',
    // params: query
    data: query
  })
}

 在接口 添加 responseType: "arraybuffer" 就可以解决乱码问题

axios 文件：

import axios from 'axios'
import {serialize} from '@/util'
import {getStore} from '@/util/store'
import NProgress from 'nprogress' // progress bar
import errorCode from '@/const/errorCode'
import router from '@/router/router'
import {Message, MessageBox} from 'element-ui'
import 'nprogress/'
import qs from 'qs'
import store from '@/store' // progress bar style
 = 30000
// 返回其他状态吗
 = function (status) {
  return status >= 200 && status <= 500 // 默认的
}
// 跨域请求，允许保存cookie
 = true
// NProgress Configuration
({
  showSpinner: false
})

// HTTPrequest拦截
(config => {
  () // start progress bar
  const TENANT_ID = getStore({name: 'tenantId'})
  const isToken = ( || {}).isToken === false
  const token = .access_token
  if (token && !isToken) {
    ['Authorization'] = 'Bearer ' + token// token
  }
  if (TENANT_ID) {
    ['TENANT-ID'] = TENANT_ID // 租户ID
  }

  // headers中配置serialize为true开启序列化
  if ( === 'post' && ) {
     = serialize()
    delete 
  }

  if ( === 'get') {
     = function (params) {
      return (params, {arrayFormat: 'repeat'})
    }
  }

  return config
}, error => {
  return (error)
})

// HTTPresponse拦截
(res => {
  ()
  const status = Number() || 200
  const message =  || errorCode[status] || errorCode['default']

  // 后台定义 424 针对令牌过去的特殊响应码
  if (status === 424) {
    ('令牌状态已过期，请点击重新登录', '系统提示', {
        confirmButtonText: '重新登录',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      ('LogOut').then(() => {
        // 刷新登录页面，避免多次弹框
        ()
      })
    }).catch(() => {
    });
    return
  }

  if (status !== 200 ||  === 1) {
    Message({
      message: message,
      type: 'error'
    })
    return (new Error(message))
  }

  return res
}, error => {
  // 处理 503 网络异常
  if ( === 503) {
    Message({
      message: ,
      type: 'error'
    })
  }
  ()
  return (new Error(error))
})

export default axios

相关文章