vue 3 script setup 中文件上传需串联文件选择、上传发起、进度监听、结果反馈四环节：用 ref 存文件、@change 监听 input，axios.post 配 onuploadprogress 计算进度，结合 status 控制状态与 ui 反馈。
在 Vue 3 的 script setup 中处理文件上传，关键在于把「文件选择」「上传发起」「进度监听」「结果反馈」这四个环节串成可响应、可控制的逻辑链。不需要额外插件，用原生 API + axios 或 fetch 就能实现干净可控的上传流程。
绑定文件选择与触发上传
用 ref 保存选中的文件对象，@change 监听 <input type="file"> 的变化：
- 文件选择后立即存入
ref，避免后续取不到files[0] - 上传按钮用
:disabled="!file"控制可用状态，提升交互反馈 - 支持多文件时改用
event.target.files数组遍历处理
示例代码片段：
const file = ref(null)
const onFileChange = (e) => { file.value = e.target.files[0] }
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章