el-upload 封装

el-upload组件的封装可以通过设置一些属性来实现。首先，我们可以设置multiple属性为false，以允许用户一次只能选择一个文件进行上传。其次，我们需要自定义上传的行为，可以通过设置action属性为空字符串，并使用http-request属性来覆盖默认的上传行为。同时，我们可以将show-file-list属性设置为false，以隐藏选择文件的列表。最后，我们需要添加一个按钮来触发文件选择，并在点击上传按钮时调用自定义的上传方法。下面是一个示例的el-upload组件的封装代码：

<el-upload ref="upload" multiple action="" :show-file-list="false" :auto-upload="false" :http-request="uploadFile">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5G</div>
</el-upload>

在这个封装中，我们使用了自定义的uploadFile方法来处理文件的上传逻辑。在这个方法中，你可以通过调用接口来上传文件，并在上传成功或失败时执行相应的操作。同时，我们还添加了一个submitUpload方法，用于在点击上传按钮时触发文件的上传。通过这样的封装，可以实现el-upload组件的批量文件上传只调用一次接口的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [封装 el-upload](https://blog.csdn.net/red_paper_zj/article/details/130138438)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue 封装el-upload批量文件上传只请求一次接口](https://blog.csdn.net/m0_38039437/article/details/128579034)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]