Element-ui upload上传组件的具体使用

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。本次主要讲解其中upload上传组件的具体使用

在Element的官网中也有一些例子来体验其功能，网址为：

upload标签为: el-upload 其中所需要功能均可以在其中添加实现

upload组件的参数

upload组件的方法

常用参数与方法说明

upload中常用的参数
action    			  		        上传的地址(常量)  目前可以测试上传的网址为:https://jsonplaceholder.typicode.com/posts/
:action               					上传的地址(变量)  正常开发是调用后台API的地址比如：`${location.origin}/demo/apis/test/api/upload`   location.origin是域名(协议，主机号，端口)
:multiple             					true 支持多选文件       false 不支持多选文件 默认为不支持
:show-file-list       					true 显示已上传文件列表  false 不显示        默认为显示
accept                					接受上传文件的类型，比如".zip"  可以选择ZIP压缩文件
:on-success="handleSuccess"   			        文件上传成功时调用方法
:on-error="handleError"					文件上传失败时调用方法
:before-upload="handleBeforeUpload"		        上传文件之前时调用方法，参数为上传的文件，若返回 false 或者返回Promise 且被 reject，则停止上传。 注意此时不能调用clearFiles方法
:disabled						是否禁用，true为禁用，false为可用  默认为可用
:limit							最大允许上传个数，如果超出则不会上传
:on-change="handleChange"                               文件状态改变时调用方法，添加文件、上传成功和上传失败时都会被调用
:auto-upload						true 选取文件后立即上传 false不自动上传需要手动上传 需要调用submit方法进行上传

upload中常用方法
调用：
this.$refs.xxx.clearFiles                               清空已上传的文件列表（该方法不支持在 before-upload 中调用）
this.$refs.xxx.submit                                   手动上传文件列表

具体实例

这里准备了两个例子，一个是自动上传，另一个是手动上传。在项目中如果没有特殊需求的话用自动上传更方便一些。style标签设置的只是一个平时写比较习惯用的参数，可以忽略

自动上传

手动上传

手动上传主要是针对有明确要求需要一些权限才允许上传的情况。

如果不理解el-dialog对话框组件可以参考官网的组件文档：

原文：https://www.cnblogs.com/shenStudy/p/15311886.html