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">确&#12288;定</el-button>
	<el-button type="primary" size="small" @click="cancel">取&#12288;消</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">确&#12288;定</el-button>
	<el-button type="primary" size="small" @click="cancel">取&#12288;消                    </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'
				});
			}