el-upload 封装
时间: 2023-08-25 21:15:53 浏览: 113
vue-upload-cropper:结合 ELUpload + vue-cropper 进行图片初始化渲染,图片上传裁剪的封装
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 ]
阅读全文