### Vue3 中使用 Element Plus `el-upload` 组件与 FormData 上传文件 在 Vue3 应用程序中，可以利用 Element Plus 提供的 `el-upload` 组件来实现文件上传功能。为了将文件数据发送给服务器，通常会创建一个 `FormData` 对象并附加文件信息。 #### 创建表单提交方法 当用户选择要上传的文件时，可以通过自定义上传行为的方式处理这些文件。下面是一个完整的例子展示如何配置 `el-upload` 并设置其属性以便于控制文件上传过程： ```vue <template> <div id="app"> <!-- 配置 el-upload --> <el-upload class="upload-demo" action="" :http-request="customUpload" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList"> <el-button type="primary">点击上传</el-button> <template #tip> <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div> </template> </el-upload> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import axios from 'axios'; const fileList = ref([]); // 存储已选中的文件列表 // 自定义上传逻辑 function customUpload(options: any) { const formData = new FormData(); // 添加文件到 formdata formData.append('file', options.file); // 发送请求至后端 API 地址 axios.post('/api/upload', formData, { headers: {'Content-Type': 'multipart/form-data'} }).then(response => { console.log('File uploaded successfully:', response); }).catch(error => { console.error('Error during upload:', error); }); } // 处理超出数量限制的情况 function handleExceed(files: File[], fileList: File[]) { console.warn(`当前限制为 ${files.length} 个文件`); } </script> ``` 此代码片段展示了如何通过 `el-upload` 的 `:http-request` 属性指定自定义函数 `customUpload()` 来替代默认的行为[^1]。在这个函数内部，构建了一个新的 `FormData` 实例并将选定的文件作为键名为 `'file'` 的条目加入其中。随后调用了 Axios 库发起 POST 请求向 `/api/upload` 路径传递该对象。