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) } }) } } }) },
标签:
ElementUI
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~