首页element ui文件上传action属性为什么还会走一遍接口

element ui文件上传action属性为什么还会走一遍接口

时间: 2025-06-23 07:25:59 浏览: 9

### Element UI 文件上传 `action` 属性触发接口请求原因解析当使用 Element UI 的 `<el-upload>` 组件时，如果指定了 `action` 属性，则组件会自动向指定 URL 发送 POST 请求来上传文件。即使覆盖了默认的上传行为并实现了自定义上传逻辑（例如通过设置 `http-request`），只要存在有效的 `action` 值，默认情况下仍会发生实际 HTTP 请求。为了避免不必要的网络调用，在不需要服务器端处理的情况下应移除或留空此参数[^1]： ```html <template> <div id="app">  <el-upload :on-change="handleChange" :auto-upload="false" multiple ref="uploadRef" > <button>选择文件</button> </el-upload> <button @click="submitUpload">上传至服务器</button> </div> </template> <script setup lang="ts"> import { ElMessage } from 'element-plus' const uploadRef = ref() function handleChange(file, fileList) { console.log('File list:', fileList) } async function submitUpload() { const formData = new FormData() ;(uploadRef.value.uploadFiles as any[]).forEach((item) => { formData.append('files', item.raw) }) try { await axios.post('/api/upload', formData, { headers: {'Content-Type': 'multipart/form-data'} }) ElMessage.success('上传成功') } catch (error) { ElMessage.error(`上传失败 ${error}`) } } </script> ``` 上述代码展示了如何不依赖于 `action` 来实现多文件批量上传的功能，并且只有在点击 “上传至服务器” 按钮之后才会真正发起一次性的 API 请求[^2]。

阅读全文