element-ui 文件上传

342 阅读1分钟

属性说明:

  • auto-upload 选择文件后,是否自动上传,默认 false
  • accept=".xlsx" 可接受的文件类型,如:excel文件类型.xlsx
  • action="/api/task/create" 接口请求地址 ,必填
  • data="{pid: pid}" 额外传参
  • name 上传的文件字段名,默认 file
  • on-success 上传成功的回调函数
<!--upload-->
<el-upload
    style="margin:0 0 30px;"
    class="upload-demo"
    ref="upload"
    :auto-upload="true"
    accept=".xlsx"
    action="/api/task/create"
    :data="{pid: pid}"
    :on-success="handleUploadSuccess"
>
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
/**
 * 上传成功
 */
handleUploadSuccess(res){
  if (res.status === 'success') {
    this.$message({
      message: res.msg,
      type: 'success',
      duration: 3500,
      onClose(){
        location.reload()
      }
    })
  }