Vue.js中切换标签导致视频上传API中断如何实现后台持续上传

上传请求中断的核心原因是请求逻辑与组件实例强绑定：要么是你在组件beforeUnmount/unmounted生命周期中主动写了取消未完成请求的逻辑，要么是请求实例、状态存储在组件内部，组件销毁后实例被回收导致请求中断。原生XMLHttpRequest和axios等请求库默认不会因为组件卸载自动终止请求。

1. 全局抽离上传逻辑（最常用方案） #

将上传请求的实例、状态、逻辑完全和组件解绑，放到全局作用域维护，用Pinia/Vuex等全局状态管理库统一管理即可。

Pinia示例代码： #

// stores/upload.js 全局上传store
import { defineStore } from 'pinia'
import axios from 'axios'

export const useUploadStore = defineStore('upload', {
  state: () => ({
    // 存储所有上传任务：key为任务ID，value为任务信息+取消方法
    uploadTasks: new Map()
  }),
  actions: {
    async startUpload(taskId, file, extraConfig = {}) {
      const cancelSource = axios.CancelToken.source()
      const formData = new FormData()
      formData.append('video', file)

      // 任务信息存在全局store，不受组件销毁影响
      this.uploadTasks.set(taskId, {
        fileName: file.name,
        progress: 0,
        status: 'uploading',
        cancel: cancelSource.cancel
      })

      try {
        const res = await axios.post('/api/video/upload', formData, {
          cancelToken: cancelSource.token,
          onUploadProgress: (evt) => {
            // 进度同步更新到全局store
            const progress = Math.round((evt.loaded * 100) / evt.total)
            this.uploadTasks.get(taskId).progress = progress
          },
          ...extraConfig
        })
        this.uploadTasks.get(taskId).status = 'success'
        return res
      } catch (err) {
        if (!axios.isCancel(err)) {
          this.uploadTasks.get(taskId).status = 'failed'
        }
        throw err
      }
    },
    // 手动取消上传的方法
    cancelUpload(taskId) {
      const task = this.uploadTasks.get(taskId)
      if (task?.status === 'uploading') {
        task.cancel('用户手动取消上传')
        this.uploadTasks.delete(taskId)
      }
    }
  }
})

组件内调用逻辑： #

<script setup>
import { useUploadStore } from '@/stores/upload'
const uploadStore = useUploadStore()

const handleSelectFile = async (e) => {
  const file = e.target.files[0]
  const taskId = Date.now().toString()
  // 仅调用全局store的上传方法，不维护请求实例
  await uploadStore.startUpload(taskId, file)
}
</script>

组件只负责触发上传、从全局store读取进度展示，所有请求逻辑完全和组件生命周期解绑，切换标签组件销毁也不会影响上传运行。

2. Web Worker托管上传逻辑 #

如果需要完全和主线程组件生命周期解绑，可把上传逻辑放到Web Worker中运行：

• 把文件数据传递给Worker，所有HTTP请求逻辑在Worker内部实现
• Worker通过postMessage把上传进度、结果回传给主线程，任意组件都可监听消息更新UI
• Worker生命周期和页面主线程绑定，不受组件销毁影响，请求会持续运行到完成。

3. 移除组件内的主动取消逻辑 #

如果之前你在公共请求封装中加了「组件卸载时自动取消当前页面所有未完成请求」的逻辑，直接删除对应取消代码即可，原生请求不会自动中断。

• 全局存储的上传任务要注意内存清理，上传完成/失败后及时清理无用任务数据，避免内存泄漏
• 如果需要支持页面刷新后续传，可额外实现断点续传逻辑，上传前先查询已上传的切片大小，从断点位置继续上传即可。

内容的提问来源于stack exchange，提问作者Arunkumar Talati