elementUI,el-upload 获取上传文件列表

<think>好的，用户的问题是关于ElementUI的el-upload组件如何获取已选择的文件列表。我需要先回忆一下ElementUI的文档和相关API。 首先，用户提到想获取上传文件列表的方法。我记得el-upload组件有一个名为file-list的属性，用来存储当前的文件列表。不过用户问的是如何通过API方法获取这个列表，而不仅仅是绑定属性。可能需要使用组件实例的某些方法或直接访问属性。 查看引用内容，引用3提到需要手动上传时设置auto-upload为false，并使用http-request覆盖action。这种情况下，用户可能需要自己控制上传过程，这时候获取文件列表就很重要了。根据ElementUI的文档，el-upload组件提供了通过ref来访问内部方法的方式。例如，使用this.$refs.upload.uploadFiles可以获取到当前的文件列表数组。这应该就是用户需要的API方法。 另外，用户可能没有注意到需要通过ref来引用组件实例，所以需要在el-upload组件上设置ref属性，比如ref="upload"。然后在方法中通过this.$refs.upload来访问组件的方法和属性。例如，在提交表单的时候，可以通过this.$refs.upload.submit()来手动触发上传，同时也能通过this.$refs.upload.uploadFiles获取文件列表。 还要注意，文件列表中的每个对象可能有status属性，表示上传状态，比如'success'、'ready'等。用户可能需要根据这些状态进行过滤，例如只选择尚未上传的文件进行提交。例如，使用filter方法筛选出status为'ready'的文件。 总结一下，步骤应该是：给el-upload设置ref，然后通过this.$refs.upload.uploadFiles获取列表。同时，在手动上传的情况下，可能需要处理上传前的文件过滤，确保只上传符合条件的文件。此外，还需要提醒用户确保正确绑定file-list属性，以便双向绑定更新。 最后，用户可能需要示例代码来具体实现，所以提供代码片段会更有帮助。比如在methods中定义handleUploadFile方法，并在提交时获取文件列表，过滤后上传。同时，提醒添加ref属性到组件标签上。</think>在ElementUI中，可以通过以下两种方式获取el-upload组件的已选择文件列表： ### 方法一：通过ref直接获取（推荐） 1. 给组件添加ref属性 ```html <el-upload ref="myUpload" :auto-upload="false"> <!-- 上传按钮 --> </el-upload> ``` 2. 通过组件实例访问文件列表 ```javascript // 获取所有文件对象（包含上传状态、文件名等信息） const fileList = this.$refs.myUpload.uploadFiles; // 获取原始File对象 const rawFiles = fileList.map(item => item.raw); ``` ### 方法二：双向绑定文件列表 1. 绑定file-list属性 ```html <el-upload :file-list="fileList" :auto-upload="false"> </el-upload> ``` 2. 在data中声明响应式数据 ```javascript data() { return { fileList: [] } } // 获取时直接访问this.fileList ``` ### 完整示例（手动上传场景） ```html <template> <el-upload ref="uploadRef" :auto-upload="false" :on-change="handleChange"> <el-button>选择文件</el-button> </el-upload> <el-button @click="submit">手动上传</el-button> </template> <script> export default { methods: { submit() { const files = this.$refs.uploadRef.uploadFiles const readyFiles = files.filter(f => f.status === 'ready') readyFiles.forEach(file => { const formData = new FormData() formData.append('file', file.raw) // 调用上传接口 uploadFileResource(formData) }) }, handleChange(file, fileList) { console.log('当前文件列表:', fileList) } } } </script> ``` ### 关键说明： 1. `uploadFiles`属性包含完整的文件对象信息，包含以下关键属性： - `name`：文件名 - `size`：文件大小 - `status`：上传状态（ready/uploading/success/error） - `raw`：原始File对象 2. 当需要获取原始File对象时，应访问`file.raw`属性，这是浏览器原生的File对象[^3] 3. 在手动上传模式（auto-upload=false）下，建议配合on-change事件监听文件列表变化[^1] 4. 若需要清空文件列表，可以调用： ```javascript this.$refs.uploadRef.clearFiles() ```