在使用Element-ui的上传组件时，我们的业务场景经常是需要我们自定义上传接口、参数等。 那该如何实现呢？

    ElementUI上传官方demo：

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

    通过官方的api http-request 来覆盖掉默认的上传行为，可以自定义上传。

    1. <el-upload
    2.   class="upload-demo"
    3.   action="#"  //将默认接口改为 # 
    4.   accept=".jpg, .jpeg, .png" //限制上传文件
    5.   :auto-upload="true"                //关闭自动上传
    6.   :http-request="upload"  //自定义上传方法
    7.   :show-file-list="false"
    8.   :before-upload="beforeIconUpload" //上传前校验
    9. >
    10.   <el-button size="small" type="primary">点击上传</el-button>
    11. <div slot="tip" class="el-upload__tip">支持扩展名：.png .jpg</div>
    12. </el-upload>
    1. upload(file){
    2.       //...上传操作
    3. }

    这样就可以实现自定义上传来。
    但是问题来了，有这么一个业务场景：一个页面多个上传操作，上传使用同一个接口，接口返回url，将url提交给后台。
    那么我们难道要每一个上传都重复写一个上传方法吗，可不可以给每个上传带上特定的标识呢？答案是可以的。

    1. <el-upload
    2.    class="upload-demo"
    3.    action="#"
    4.    accept=".jpg, .jpeg, .png"
    5.    :auto-upload="true"
    6.    :http-request="(file)=>{uploadIcon(file,0,`${index}`)}"
    7.    :show-file-list="false"
    8.    :before-upload="beforeIconUpload"
    9.  >
    10.   <el-button size="small" type="primary">点击上传</el-button>
    11.   <div slot="tip" class="el-upload__tip">支持扩展名：.png .jpg</div>
    12. </el-upload>

    通过改造http-request赋值的方法，取到file对象，同时自定义自己的参数。

    1. upload(file,flag,index){
    2.       //...上传操作
    3. }

    这样就可以将上传操作写成公共方法，只要传入file对象与特定标识即可。