---

一、前言

在现代 web 开发中，文件上传是一个常见需求。本文将详细介绍如何在 Vue 3 中处理文件上传，并确保上传后的文件列表能够响应式更新。

正确处理文件列表的响应式更新：在 Vue 中，直接修改响应式变量（如使用 .push()）可能不会触发视图更新。一般推荐先获取当前列表值并重新赋值。

1.创建文件上传组件

在 src/components 目录下创建一个新的组件 FileUpload.vue，文件内容如下：

<template><el-uploadaction="http://your-upload-url":on-success="handleFileSuccess":limit="10"list-type="text"multiple><el-button type="primary">点击上传</el-button></el-upload><ul><li v-for="file in wxnrFormFileList" :key="file.id">{{ file.name }}</li></ul>
</template><script>
import { ref } from 'vue'
import axios from 'axios'export default {name: 'FileUpload',setup() {const wxnrFormFileList = ref([])const handleFileSuccess = async (response, file, UploadFiles) => {const fileId = response.data[0]try {const res = await axios.get(`http://your-api-url/fileInfo/${fileId}`)const fileName = res.data[0].fileNamewxnrFormFileList.value = [...wxnrFormFileList.value,{id: fileId,name: fileName,}]ElMessage.success("上传成功")} catch (error) {console.error("获取文件信息失败", error)ElMessage.error("获取文件信息失败")}}return {wxnrFormFileList,handleFileSuccess,}}
}
</script>

2.解释代码

1. 模板部分：

   • 使用 el-upload 组件来处理文件上传。
   • 配置 action 属性为文件上传接口地址。
   • 配置 on-success 事件来处理上传成功后的逻辑。

2. 响应式变量：

   • 使用 ref 创建一个响应式变量 wxnrFormFileList，用于保存上传后的文件列表。

3. 处理文件上传成功的逻辑：

   • handleFileSuccess 方法在文件上传成功后被调用。
   • 从响应数据中提取文件 ID，并通过 API 获取文件名。
   • 更新 wxnrFormFileList 以包含新上传的文件信息。

4. 显示文件列表：

   • 使用 v-for 指令遍历并显示 wxnrFormFileList 中的文件。

3.在主应用中使用文件上传组件

在 App.vue 中使用我们刚刚创建的 FileUpload 组件：

<template><div id="app"><FileUpload /></div>
</template><script>
import FileUpload from './components/FileUpload.vue'export default {name: 'App',components: {FileUpload,}
}
</script>

4.总结

通过上述步骤，我们成功地在 Vue 3 项目中实现了文件上传功能，并确保上传后的文件列表能够响应式更新。关键点在于：

• 使用 Vue 3 的 ref 定义响应式变量。
• 处理文件上传成功后的逻辑，获取文件详细信息并更新列表。
• 使用 Element Plus 提供的 UI 组件简化文件上传的实现。

希望这篇文章能帮助你更好地理解和实现 Vue 3 中的文件上传功能。如果还有其他问题或需要深入探讨的地方，请随时提出！