### 使用 Vue3 和 Element Plus 的 `el-upload` 组件通过 FormData 上传文件到后端 #### 创建 ElUpload 组件实例 为了实现拖拽上传功能，需配置 `el-upload` 组件的相关属性。下面是一个基本的例子： ```html <template> <div> <!-- 设置 action URL 并开启拖拽模式 --> <el-upload class="upload-demo" drag :action="uploadUrl" multiple :before-upload="handleBeforeUpload" :http-request="customHttpRequest"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到这里或<em>点击上传</em></div> </el-upload> </div> </template> <script setup> import { ref } from 'vue'; const uploadUrl = "https://example.com/upload"; // 后端接收地址 let fileList = ref([]); // 存储已选中的文件列表 </script> ``` #### 处理文件上传前逻辑 在实际应用中可能需要对文件做一些前置处理工作，比如验证文件大小、类型等。 ```javascript function handleBeforeUpload(file) { const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { alert('上传文件大小不能超过 2MB!'); } return isLt2M; } ``` #### 定制化 HTTP 请求方法 默认情况下，`el-upload` 会发起标准的 AJAX 请求来发送数据；然而有时开发者希望自定义这个过程，这时可以通过覆盖 `httpRequest` 方法来自行控制请求细节[^1]。 ```javascript async function customHttpRequest(option) { try { const formData = new FormData(); formData.append('file', option.file); await fetch(uploadUrl, { method: 'POST', body: formData, headers: { Authorization: localStorage.getItem('token') || '' }, }); console.log(`${option.file.name} uploaded successfully`); } catch (error) { console.error(`Failed to upload ${option.file.name}`, error); } option.onSuccess?.(); // 告诉组件当前文件已经完成上传操作 } ``` 上述代码片段展示了如何利用 JavaScript Fetch API 来构建带有认证头信息的 POST 请求，并附带要上传的文件作为表单字段的一部分。当成功接收到响应时，则调用 `onSuccess()` 函数通知父级组件更新 UI 或者执行其他必要的动作[^2]。