el-upload 手动上传文件

你可以使用el-upload组件手动上传多个文件，具体操作方式如下： 1. 在代码中定义一个el-upload组件，设定multiple属性为true，表示可选择多个文件上传。 2. 通过ref属性获取el-upload组件实例，在点击上传按钮时监听upload方法，遍历上传的文件列表，并通过ajax或fetch请求发送每个文件。 3. 在请求成功或失败时显示相应的提示信息，例如上传成功时弹出成功提示框，上传失败时弹出错误提示框，并显示错误信息。 参考代码如下： <template> <el-upload ref="upload" :multiple="true" :on-exceed="handleExceed" :on-success="handleSuccess" :on-error="handleError" :before-upload="beforeUpload" > <el-button size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip"> 只能上传jpg/png文件，且不超过500kb </div> </el-upload> </template> <script> export default { methods: { handleExceed(files, fileList) { this.$message.warning(`当前限制选择 ${this.limit} 个文件，最多可选择 ${this.limit} 个`); }, handleSuccess(response, file, fileList) { this.$message.success(`文件 ${file.name} 上传成功`); }, handleError(error, file, fileList) { this.$message.error(`文件 ${file.name} 上传失败: ${error}`); }, beforeUpload(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt500K = file.size / 1024 < 500; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG/PNG 格式'); return false; } if (!isLt500K) { this.$message.error('上传头像图片大小不能超过 500KB'); return false; } return true; }, upload() { const files = this.$refs.upload.uploadFiles; for (let i = 0, len = files.length; i < len; i++) { const data = new FormData(); data.append('file', files[i].raw); // 发送请求，上传文件数据 fetch('/api/upload', { method: 'POST', body: data }) .then(response => response.json()) .then(data => { // 处理上传成功结果 this.handleSuccess(data, files[i], files); }) .catch(error => { // 处理上传失败结果 this.handleError(error, files[i], files); }); } } } }; </script>

### 实现 el-upload 组件的手动批量上传 为了实现手动批量上传文件的功能，可以利用 `el-upload` 组件并配置相应的属性和事件处理器来满足需求。下面是一个完整的 Vue 组件示例，展示了如何通过点击按钮触发多个文件的同时上传。 #### HTML 结构与绑定逻辑 ```html <template> <div class="upload-container"> <!-- 创建文件选择器 --> <el-upload ref="upload" action="/api/upload" multiple :auto-upload="false" :file-list="fileList" @change="handleChange" > <button type="button">选择文件</button> </el-upload> <!-- 添加一个按钮用于提交所选文件 --> <el-button type="primary" @click="submitUpload()">上传文件</el-button> </div> </template> ``` 此部分定义了一个带有 `multiple` 属性的 `el-upload` 输入框以便支持多文件的选择，并禁用了自动上传行为以等待显式的命令[^1]。 #### JavaScript 方法定义 ```javascript <script setup> import { ref } from 'vue'; // 定义响应式变量存储已选文件列表 const fileList = ref([]); // 获取 upload 组件实例 const upload = ref(null); function handleChange(file, fileList) { console.log('File selected:', file); } function submitUpload() { // 调用组件内部方法发起上传请求 upload.value.submit(); } </script> ``` 这段脚本初始化了两个引用对象：一个是用来保存当前选定文件的信息数组；另一个是指向实际 DOM 中 `<el-upload>` 元素的对象。当用户选择了新文件时会调用 `handleChange()` 函数记录这些变化。而真正执行上传动作则是由 `submitUpload()` 来完成，它会调用底层 API 提交所有待处理的数据给服务器。 请注意，在某些情况下，比如设置了 `:auto-upload="false"` 后，可能会影响钩子函数的行为，例如 `before-upload` 不会被触发。因此建议开发者仔细阅读官方文档确认具体版本下的特性差异[^2]。 对于非常大的文件（如 MP4），还可以考虑采用分片上传的方式提高效率和服务端处理能力。这通常涉及到更复杂的业务逻辑设计以及前后端之间的紧密协作[^3]。