element-ui上传组件（el-upload）单文件上传，单选文件 覆盖已有文件

需求：单选文件上传，每次只允许一个文件上传，当已选择了文件再次点击选择其他的文件时，需要覆盖上次选择的文件。但是看了看el-upload的开发文档，好像不支持这个需求，选择新的文件后无法替代旧的。研究了下源码找到了实现方法。

解决方案

思路

利用el-upload的on-exceed，该方法是文件超出个数限制时的钩子，当把上传文件数最大设置为1的时候再次选择新文件时会触发这个方法，利用这个对文件进行重新赋值即可。

on-exceed的回调函数有两个参数function(files, fileList)，files为当前选择的文件，fileList已经选择后的文件（上次选择的），可以对fileList进行赋值来修改上传时的文件。但是只修改fileList是不够的，还需要修改el-upload里的uploadFiles，保持数据同步，不然上传后的回调函数里的字段会报错。

实例代码

HTML部分

<el-upload
                        class="col-md-6 col-lg-6 col-xs-12"
                        ref="rebateUpload"
                        :multiple="false"
                        :action="config.interfaceIP+'xxx'"
                        :headers=" {'X-CSRF-TOKEN':this.config.csrfToken}"
                        :data="{type:uploadType}"
                        :before-upload="()=>{$loading({lock: true,text: '上传中...',spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'});}"
                        :on-success="uploadRequest"
                        :limit="1"
                        :on-exceed="uploadExceed"
                        :auto-upload="false">
                    <el-button slot="trigger"  type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" type="success" @click="()=>{$refs['rebateUpload'].submit()}">
                        上传
                    </el-button>
                </el-upload>
           

注：该上传为手动上传

JS部分

uploadExceed(files, fileList) {
                this.$set(fileList[0], 'raw', files[0]);
                this.$set(fileList[0], 'name', files[0].name);
                this.$refs['rebateUpload'].clearFiles();//清除文件
                this.$refs['rebateUpload'].handleStart(files[0]);//选择文件后的赋值方法
            },
           

总结

因为单选所以只要覆盖第一个值就可以了，fileList[0], '里的raw', 为选中的文件，同时替换掉文件的文件名name，再清除文件为el-upload里的uploadFiles重新赋值。