vuecli4 + elementUi 同一页面多个上传组件共用方法

on-success中的最后一个参数是要传入的字段名

<el-form-item label="身份证附件" >
                        <el-upload
                                class="upload-xueli"
                                :action="$baseUrl.common + '/file'"
                                :on-success="(response, file, fileList)=>handleUploadSuccess(response, file, fileList,baseInfo.idCardFiles)"
                                :headers = "headers"
                                :before-upload="beforeUpload"
                                :on-preview="handlePreview"
                                :on-exceed="handleExceed"
                                :on-remove="(file, fileList)=>handleRemoveFiles(file, fileList,baseInfo.idCardFiles)"
                                :file-list="idCardFileList"
                                ref="idCardUploader"
                                :limit="2"
                                list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">请上传jpg/png/pdf文件，不超过2M</div>
                        </el-upload>
     </el-form-item>

<el-form-item label="头像照片" >
                        <el-upload
                                class="upload-xueli"
                                :action="$baseUrl.common + '/file'"
                                :headers = "headers"
                                :before-upload="avatarBeforeUpload"
                                :on-preview="handlePreview"
                                :on-success="(response, file, fileList)=>handleUploadSuccess(response, file, fileList,baseInfo.headImgFiles)"
                                :on-remove="(file, fileList)=>handleRemoveFiles(file, fileList,baseInfo.headImgFiles)"
                                :on-exceed="handleExceed"
                                :file-list="headImgFileList"
                                :limit="1"
                                ref="avatarUpload"
                                list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">请上传jpg/png文件，不超过500kb</div>
                        </el-upload>

                        <div v-if="headImgFileList.id" id="headImg" class="el-form-item__error" style="display: none">
                            头像照片不能为空
                        </div>
                    </el-form-item>
<el-dialog :visible.sync="dialogVisible">
            <img v-if="dialogImageUrl" width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

data:

data(){
            return {
                dialogImageUrl: ''", //
                dialogVisible: false,
                headers:{}, //上传带header
            }
        }

mounted() {
            this.headers ={Authorization : 'Bearer '+(sessionStorage.getItem('token') || '')}
        },

methods:

//上传之前的检查
            beforeUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf';
                const isLt = file.size / 1024 < 2000;
                if (!isJPG) {
                    Message.error('请上传jpg、png或pdf格式文件。');
                    return false;
                }
                if (!isLt) {
                    Message.error('附件大小不能超过 2M!');
                    return false;
                }
                return isJPG && isLt;
            },
//超出附件数量限制
handleExceed(files, fileList) {
                Message.warning("超出附件数量限制。");
            },
//查看上传附件
handlePreview(file) {
                let id =file.response.data;
                this.dialogImageUrl = null;
                this.dialogVisible = true;
                this.dialogImageUrl = this.$baseUrl.common +'/file/'+id;
            },
//删除数组中特定项
            deleteItem(item, list){
                for (var key in list) {
                    list[key].id === item ? list.splice(key, 1) : null;
                }
            },
//删除附件
            handleRemoveFiles(file, fileList ,arr) {
                console.log(file)
                let id=file.response.data;
                this.deleteItem(id,arr); //删除数组中特定id项
            },
//上传成功
            handleUploadSuccess(response, file, fileList , arr){
                let data = response;
                if(!data.code){
                    let id = response.data,
                        item = {
                            id:id,
                            name:file.name,
                            uid:file.uid
                        };
                    arr.push(item);
                }else{
                    Message.error(data.msg);
                }
            }