element ui --- 多个el-upload上传组件根据不同参数实现同一接口实现上传

实现效果图如下：

 

 代码实现：

 <el-form-item label="其他：" prop="otherDocuments" class="upLoadImgForm">
                            <div class="imgShowBtn" 
                                v-if="infoData.otherDocuments">
                                <img width="100%" 
                                    :src="infoData.otherDocuments" 
                                    alt="其他"
                                    class="avatarImg">
                                <div class="delBtnList">
                                    <div class="qv_btn" @click="handlePictureCardPreview(infoData.otherDocuments)"><span class="el-icon-zoom-in"></span></div>
                                    <div class="qv_btn" @click="handleDownload(infoData.otherDocuments,'其他')"><span class="el-icon-download"></span></div>
                                    <div class="qv_btn" @click="handleRemoveImg(infoData.otherDocuments,'6')"><span class="el-icon-delete"></span></div>
                                </div>
                            </div>
                            <el-upload
                                v-else
                                class="avatar-uploader mr-10"
                                action="#"
                                :show-file-list="false"
                                :limit='1'
                                list-type="picture-card"
                                :http-request="function(file){return uploadSectionFile(file,6)}"
                                v-model="infoData.businessCertificate">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>

通过:http-request="function(file){return uploadSectionFile(file,6)}"闭包方式传参 可以将对应的码值传入上传方法中做相应的类型判断。

上传方法如下：

 // 图片上传
        uploadSectionFile(params,imgCode){
            // FormData 对象
            let file = params.file;
            const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
            const isJPG = typeArr.indexOf(file.type) !== -1;
            const isLt3M = file.size / 1024 / 1024 < 5;
            if (!isJPG) {
                this.$message.error('请上传图片格式!');
                return;
            }
            if (!isLt3M) {
                this.$message.error('上传图片大小不能超过 5MB!');
                return;
            }
            var formData = new FormData();
            // 文件对象
            // 图片类型imageCode 1,营业执照;2,经营许可证;3,产品图册;4,高新技术企业证书;5,医疗器械备案凭证;6,其他;
            formData.append('fileImage', file);
            formData.append('code',imgCode)
            upLoadImg(formData).then(res=>{
                if(res.code == '200'){
                    if(imgCode == 1){
                        this.infoData.businessLicense  = res.data;
                    }else if(imgCode == 2){
                        this.infoData.businessCertificate = res.data;
                    }else if(imgCode == 3){
                        this.infoData.productAtlas = res.data;
                    }else if(imgCode == 4){
                        this.infoData.highTechEnterpriseCertificate = res.data;
                    }else if(imgCode == 5){
                        this.infoData.medicalDeviceFilingCertificate = res.data;
                    }else {
                        this.infoData.otherDocuments = res.data;
                    }
                }
            })
        },

表格中多PDF上传也是同样的方式，代码如下：

<el-table-column align="center" prop="filePath" label="上传文件">
                                <template slot-scope="scope">
                                    <el-form-item 
                                        :prop="'certificateNoList.'+scope.$index+'.filePath'"
                                        :rules="rules.filePath"
                                        class="costValue">
                                        <div v-if="scope.row.filePath" class="filePathCon">
                                            <span>
                                                <i class="el-icon-document"></i>
                                                {{scope.row.filePath}}
                                                <span class="fileDelBtn" @click="handleDeletFile(scope.row.filePath,scope.row.productRegistrationCertificateNo)">
                                                    <i class="el-icon-delete"></i>
                                                </span>
                                            </span>
                                        </div>
                                        <el-upload
                                            action="#"
                                            v-else
                                            :show-file-list="false"
                                            :limit='1'
                                            accept="pdf"
                                            class="upload-demo pdfLoadBtn"
                                            :http-request="function(file){return uploadPdfFile(file,scope.$index)}">
                                            <el-button size="small" type="primary">点击上传</el-button>
                                        </el-upload>
                                    </el-form-item>
                                </template>
                            </el-table-column>

上传方法如下：

// pdf上传
        uploadPdfFile(params,idx){
             // FormData 对象
            let file = params.file;
            if(file.type != 'application/pdf'){
                this.$message.error('请上传pdf格式文件!');
                return
            }
            var formData = new FormData();
            // 文件对象
            formData.append('filePDF', file);
            uploadPDF(formData).then(res=>{
                if(res.code == '200'){
                    if(this.infoData.certificateNoList && this.infoData.certificateNoList.length>0){
                        this.infoData.certificateNoList.forEach((item,index)=>{
                            if(index == idx){
                                this.$set(item,'filePath',res.data)
                            }
                        })
                    }
                }
            })
        },