Vue3 环境下 vue-simple-uploader 进度条异常修复与源码适配

Vue3 环境下 vue-simple-uploader 进度条异常修复与源码适配 | 极客日志

// Vue2 中的响应式数据访问
data() {
  return { uploader: null, fileList: [] }
},
mounted() {
  this.uploader = new Uploader(this.options)
  // Vue2 能自动追踪 this.uploader 的变化
}

// Vue3 中需要显式处理响应式
import { ref, reactive } from 'vue'
const uploader = ref(null)
const fileList = reactive([])
onMounted(() => {
  uploader.value = new Uploader(options)
  // 如果组件内部没有正确处理 ref，状态更新可能不会触发 UI 重渲染
})

Vue2 钩子名称	Vue3 对应钩子	主要变化
beforeCreate	setup()	不再需要，setup 在组件创建前执行
created	setup()	逻辑移到 setup 中
beforeMount	onBeforeMount	名称添加 on 前缀
mounted	onMounted	名称添加 on 前缀
beforeUpdate	onBeforeUpdate	名称添加 on 前缀
updated	onUpdated	名称添加 on 前缀
beforeDestroy	onBeforeUnmount	名称和语义变化
destroyed	onUnmounted	名称和语义变化

# 克隆 vue3 适配分支
git clone -b vue3 https://github.com/simple-uploader/vue-uploader.git
# 进入项目目录
cd vue-uploader
# 安装依赖（注意版本兼容性）
npm install
# 查看 package.json，确认依赖版本
# 需要确保 vue 和 vue-router 的版本与你的项目一致

// 在 Vue2 风格中常见的做法
methods: {
  updateProgress(file) {
    this.progress = file.progress // 在 Vue3 中，这种直接赋值可能不会触发视图更新
  }
}

import { ref, reactive, watch } from 'vue'
export default {
  setup() {
    // 使用 ref 创建响应式进度值
    const progress = ref(0)
    const fileStatus = reactive({
      uploading: false,
      paused: false,
      error: null
    })
    // 监听 uploader 实例的状态变化
    watch(() => uploaderInstance.files, (newFiles) => {
      if (newFiles.length > 0) {
        const currentFile = newFiles[0]
        // 确保进度更新触发响应式
        progress.value = currentFile.progress || 0
        // 更新文件状态
        Object.assign(fileStatus, {
          uploading: currentFile.isUploading(),
          paused: currentFile.isPaused(),
          error: currentFile.error
        })
      }
    }, { deep: true })
    return { progress, fileStatus }
  }
}

Vue3 环境下 vue-simple-uploader 进度条异常修复与源码适配

大文件上传交互优化实战：从进度条异常到源码级修复的 Vue3 深度适配

1. 问题定位：为什么 Vue3 环境下上传组件会'失常'

1.1 Vue3 响应式系统的变化带来的连锁反应

1.2 组件生命周期和事件系统的适配问题

1.3 Element Plus Dialog 中的渲染异常分析

2. 源码级修复：从社区方案到定制化改进

2.1 获取和修改源码的完整流程

2.2 进度条异常的核心修复

2.

更多推荐文章

相关免费在线工具

Vue3 环境下 vue-simple-uploader 进度条异常修复与源码适配

大文件上传交互优化实战：从进度条异常到源码级修复的 Vue3 深度适配

1. 问题定位：为什么 Vue3 环境下上传组件会'失常'

1.1 Vue3 响应式系统的变化带来的连锁反应

1.2 组件生命周期和事件系统的适配问题

1.3 Element Plus Dialog 中的渲染异常分析

2. 源码级修复：从社区方案到定制化改进

2.1 获取和修改源码的完整流程

2.2 进度条异常的核心修复

2.

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具