Element UI 上传组件 (el-upload) 文件获取方法

<h1>Element UI 上传组件 (el-upload) 文件获取方法</h1>

<p>本文介绍如何使用 Element UI 的 el-upload 组件获取上传的文件内容，即使不使用 el-upload 自带的上传方法。</p>

<pre><code><el-form> <el-upload :action="null" :auto-upload="false" :file-list="fileList" :on-change="handleChange" > <el-button type="primary">Click to upload</el-button> </el-upload> <el-form-item> <el-button type="primary" @click="updateOneSection">Submit</el-button> <el-button type="primary" @click="checkForm">Check</el-button> </el-form-item> </el-form></code></pre>

<p>当使用 el-upload 上传文件时，因为你并没有使用 el-upload 提供的上传方法，你该如何获取 el-upload 收集到的文件内容？可以使用 handleChange 方法中的参数 file 来获取 el-upload 收集到的文件。在 handleChange 方法中，你可以将收集到的文件存储在 fileList 中，然后在其他方法中使用 fileList 来获取文件信息。</p>

<p>以下是一个示例代码：</p>

<pre><code>data() { return { fileList: [] // 存储收集到的文件 } }, methods: { handleChange(file) { this.fileList = file.list; // 将收集到的文件存储在 fileList 中 }, updateOneSection() { // 使用 this.fileList 来获取上传的文件信息 console.log(this.fileList); }, checkForm() { // 使用 this.fileList 来获取上传的文件信息 console.log(this.fileList); } }</code></pre>

<p>在 handleChange 方法中，file.list 表示收集到的文件列表，你可以根据需要进行处理。在 updateOneSection 和 checkForm 方法中，你可以使用 this.fileList 来获取上传的文件信息。</p>