vue+element UI upload 上传组件使用经验分享

用 vue+element UI 框架开发前端项目时，产品功能要求可以上传图像和文件，这就可以用到 el-upload 上传组件。在用此组件实现功能时，从陌生到熟悉，掌握了一些方法，仅以此文做一个总结梳理。 关于 upload 上传 element 的官网就一句话介绍：通过点击或者拖拽上传文件。它的基础代码如下：

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> 

我们看 element 官网详细的说明，可以发现 el-upload 的触发事件和属性特别多，action, on-priview, on-remove, before-remove, on-exceed 等大概有二十多个，每个场景都不一样，那我们实际项目中真的会用到这么多的事件吗？我的回答是不用，根据自己的需求来做合适的选择。 本文就结合我自己的实际项目需求来进行说明。代码如下：

<el-upload
            action
            list-type="picture-card"
            :limit="2"
            :http-request="uploadPicture"
            :file-list="pictureList"
            :on-change="handleChangePicture"
          >
            <i class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">