element-ui upload 照片墙回显，隐藏上传按钮，选择与提交分开
1.上传的是paf，所以照片墙是一片空白，所以需要利用返回的数据来回显url在照片墙
2.限制上传数为1，选择上传文件后，上传按钮隐藏，直到把上传的文件移除操作再显示
3.把选择文件和点击确定最终上传分开
最开始先来讲1和2，这里也是分开上传的，但是是两个接口，所以下面会单独解释纯前端实现分开操作上传
//点击放大显示区域
![]()
确 定
取 消
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.纯前端实现选择文件和上传分开实现
选择好文件，再点击确定上传
确 定
取 消
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'
});
}