element-ui upload 照片墙回显，隐藏上传按钮，选择与提交分开

1.上传的是paf，所以照片墙是一片空白，所以需要利用返回的数据来回显url在照片墙

2.限制上传数为1，选择上传文件后，上传按钮隐藏，直到把上传的文件移除操作再显示

3.把选择文件和点击确定最终上传分开

最开始先来讲1和2，这里也是分开上传的，但是是两个接口，所以下面会单独解释纯前端实现分开操作上传

<el-upload :class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}" //隐藏显示上传按钮style style="margin-bottom:10px;" :file-list="fileList" //照片墙显示一定要设置这里！！！！！ :action="baseApi" list-type="picture-card" :on-preview="handlePictureCardPreview" //点击放大 :on-success="handleAvatarSuccess" :on-remove="handleRemove" ref="handle" :limit="1" :on-exceed = "handleExceed" //限制个数函数回调 :on-change="handleChange"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false"> //点击放大显示区域 <img width="100%" :src="dialogImageUrl" alt> </el-dialog> <div style="text-align:center"> <el-button type="primary" size="small" @click="determine" :disabled="state==true?false:true">确　定</el-button> <el-button type="primary" size="small" @click="cancel">取　消</el-button> </div>

 data的定义

return{ fileList:[], state:false, //确定按钮状态 pdfData:[], //上传文件返回的参数 dialogImageUrl:'', //点击图片放大url dialogVisible:false, showBtnImg:true, //显示上传图标按钮 noneBtnImg:false, //不显示上传图标按钮 showUpload:false, baseApi:'' }

js

//图片上传时触发 handleChange(file,fileList){ this.noneBtnImg = true //不显示上传按钮 this.showBtnImg = false //显示上传按钮 if(file.status ==='ready'){ this.state=false //没有上传完成所以不能点击确定 } }, //上传成功回调 handleAvatarSuccess(response,file,fileList){ console.log('response',response) if(response.code==='200') { this.pdfData = response.obj; let url={ url:response.obj.thumbnailUrl } this.fileList.push(url) //把要在照片墙回显的字段url存入 this.state=true this.noneBtnImg = true this.showBtnImg = false } }, handlePictureCardPreview(file) {//点击放大图片 this.dialogImageUrl = file.response.obj.url; this.dialogVisible = true; }, //移除回调 handleRemove(file, fileList) { console.log('fileList',fileList) this.noneBtnImg = false this.showBtnImg = true this.fileList=[] //因为是push进去的所以需要清空照片墙 let data = this.pdfData let params={ //接口参数 } delete(params).then(res=>{ if(res.data.code=='200'){ this.$message({ message: '删除成功！！！', type: 'success' }); } }).catch((error) => { this.$message({ type: 'info', message: error }); }); }, //关闭弹窗清除内容 closeDeleteWindow(callback){ if(!callback){ this.$refs.handle.clearFiles(); this.state=false this.noneBtnImg = false this.showBtnImg = true this.fileList=[] } }, //点击弹窗确定 determine(){ let params={ //参数 } //这里是你的后端接口请求（我是用axios封装了） upload(params).then(res=>{ if(res.data.code=='200'){ this.$message({ message: '上传成功！！！', type: 'success' }); this.$refs.handle.clearFiles(); this.inputName=''; this.state=false; this.noneBtnImg = false this.showBtnImg = true this.fileList=[] } }).catch((error) => { this.$message({ type: 'info', message: error }); }); }, //取消 cancel(){ this.$refs.handle.clearFiles(); this.inputName=''; this.state=false; this.noneBtnImg = false this.showBtnImg = true this.fileList=[] }, handleExceed(files, fileList) { //限制上传个数 this.$message({ message: '最多上传一个', type: 'warning' }); }

css：上传按钮

.uoloadSty .el-upload--picture-card{ width: 148px; height: 148px; line-height: 146px } .disUoloadSty .el-upload--picture-card{ display:none; /* 上传按钮隐藏 */ }

3.纯前端实现选择文件和上传分开实现

选择好文件，再点击确定上传

<el-upload style="margin-bottom:10px;" :action="url+'name='+name" //可以直接携带参数请求 :auto-upload="false" //是设置分开上传的 list-type="picture-card" :on-success="handleAvatarSuccess" ref="handle" :limit="1" :on-exceed = "handleExceed" :on-change="onGoingPicture"> <i class="el-icon-plus"></i> </el-upload> <div style="text-align:center"> <el-button type="primary" size="small" @click="determine" :disabled="state==true?false:true">确　定</el-button> <el-button type="primary" size="small" @click="cancel">取　消 </el-button> </div>

js

onGoingPicture(file){ console.log('file',file) if(file.status ==='ready'){ this.state=true //按钮的状态 } }, handleAvatarSuccess(response,file,fileList){ console.log('response',response) if(response.code==='200') { this.$message({ message: '上传成功！', type: 'success' }); this.$refs.handle.clearFiles(); } }, handleRemove(file, fileList) { console.log('file',file) console.log('fileList',file) }, //关闭弹窗清除内容 closeDeleteWindow(callback){ if(!callback){ this.$refs.handle.clearFiles(); this.state=false, } }, //点击弹窗确定 determine(){ this.$refs.handle.submit(); //重新提交 }, //取消 cancel(){ this.$refs.handle.clearFiles(); }, handleExceed(files, fileList) { this.$message({ message: '最多上传一个', type: 'warning' }); }