element-ui中的upload组件使用总结

 element-ui官网

使用upload组件：

<el-upload
  class="upload-demo"
  :action="ruleForm.uploadUrl"
  :headers="myHeader"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :limit="1"
  ref="upload"
  :on-exceed="handleExceed"
  :file-list="fileList"
>
<el-button size="small" type="primary">选择文件</el-button>

action: 是请求后端接口的路径 （必填的）

header: 是配置请求头的 / 在此处带了token

on-preview: 是点击文件列表中已上传的文件时执行的

on-remove: 是文件列表中移除文件时执行的

before-remove: 删除文件之前执行的，可以用作提示用户二次确认删除

limit: 是上传文件的个数

on-exceed: 上传文件个数超过限制的时候执行的

file-list: 上传的文件的列表

此处添加的ref是为了在用户点击关闭后清空列表 

通过clearFiles方法，这也是element提供的。

addDialogClose(){
  this.$refs.ruleForm.resetFields();
  this.addClassroomShow = false
  this.$refs.upload.clearFiles();
}

总结：upload组件已经封装的很好了，只是action属性是必填的，有点坑。