文件上传示例

<template>
  <div>
    <!-- element ui 文件上传  -->
    <span>1-</span>
    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="onFileChange">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">上传png文件</div>
    </el-upload>
    <!-- element ui 封装文件上传 -->
    <span>2-</span>
    <div class="upload-wrapper">
      <el-upload
        ref="RefUpload"
        :action="action"
        :headers="headers"
        :auto-upload="true"
        :multiple="true"
        show-file-list
        :limit="limit"
        :accept="accept"
        :on-change="handleChange"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <!-- input模拟文件上传 -->
    <span>3-</span>
    <el-form>
      <div class="upload-area" :class="rowData.length ? 'hide' : ''">
        <div class="el-upload">
          <i class="el-icon-plus avatar-uploader-icon"></i>
          <input type="file" name="file" title mu