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'
});
}
文章浏览阅读638次。fun unZip(zipFile: String, context: Context) { var outputStream: OutputStream? = null var inputStream: InputStream? = null try { val zf = ZipFile(zipFile) val entries = zf.entries() while (en..._kotlin 对上传的压缩包进行分析
文章浏览阅读1.9k次。随着业务逻辑越来越多,业务模块也越来越大,不可避免会遇到64K方法数的限制。最直观的表现就是编译报错:较早版本的编译系统中,错误内容如下:Conversion to Dalvik format failed:Unable to execute dex: method ID not in [0, 0xffff]: 65536较新版本的编译系统中,错误内容如下:trouble writing outp_java函数大于64k编译失败
文章浏览阅读2k次,点赞7次,收藏10次。物联网领域,有很多数据通信场景,因为原设备整体系统结构、运行环境等方面的限制,需求在不增加通信数据线缆的情况下实现数据的远程传输,因为特殊应用场景下考虑到环境的限制,还不能使用常规的无线通信手段,所以借助电源线缆进行传输的电力线载波技术应运而生,本次博文给大家分享的就是博主完全自主研发的低压电力线载波通信模组。_电力载波模块csdn
文章浏览阅读7.4k次。密码学基本概念 密码学(Cryptology)是结合数学、计算机科学、电子与通信等学科于一体的交叉学科,研究信息系统安全的科学。起源于保密通信技术。具体来讲,研究信息系统安全保密和认证的一门科学。 密码编码学,通过变换消息(对信息编码)使其保密的科学和艺术 密码分析学,在未知密钥的情况下从密文推_密码体制的五个要素
文章浏览阅读1.9k次。1 、据说python3就没有这个问题了2 、u'字符串' 代表是unicode格式的数据,路径最好写成这个格式,别直接跟字符串'字符串'这类数据相加,相加之后type就是str,这样就会存在解码失误的问题。别直接跟字符串'字符串'这类数据相加别直接跟字符串'字符串'这类数据相加别直接跟字符串'字符串'这类数据相加unicode类型别直接跟字符串'字符串'这类数据相加说四遍3 、有些读取的方式偏偏..._python 路径 中文
文章浏览阅读107次。最近,阿云 B 站没声音,是在憋大招!8月5日周四 19:00 是阿里云的直播首秀,给大家请来了 Forrester 评分世界第一的 Serverless 团队产品经理江昱,给大家在线...._阿里云直播b站
文章浏览阅读1.1k次。我好苦啊,半夜还在打代码。还出bug,狗日的。问题是这样的:我在新建的项目里,建了两个Module: fiora-ec和fiora-core。项目的依赖顺序是这样的,App依赖fiora-ec,fiora-ec又依赖于fiora-core,因为这种依赖关系,所有可以在app和fiora-ec中删除一些不必要的引入,比如这个玩意儿:com.android.support:appcompat-v7:..._为什么as在一个包下建了多个module,缺无法打开了
文章浏览阅读1.4k次。1. SMTP 插件 URL:http://www.magentocommerce.com/magento-connect/TurboSMTP/extension/4415/aschroder_turbosmtp KEY:magento-community/Aschroder_TurboSmtp 2. Email Template Adapter..._magento extension pour ricardo.ch
文章浏览阅读161次。声明:本文为原创作品,版权归akuei2及黑金动力社区共同所有,如需转载,请注明出处http://www.cnblogs.com/kingst/ 2.5 低级建模的资源 低级建模有讲求资源的分配,目的是使用“图形”来提高建模的解读性。 图上是低级建模最基本的建模框图,估计大家在实验一和实验二已经眼熟过。功能模块(低级功能模块)是一个水平的长方形,而控制模块(低级控制模块)是矩形。组..._cyclone ep2c8q208c黑金开发板
文章浏览阅读2.2w次,点赞10次,收藏63次。在日常生活和实际应用当中,我们经常会用到统计方面的知识,比如求最大值,求平均值等等。R语言是一门统计学语言,他可以方便的完成统计相关的计算,下面我们就来看一个相关案例。1. 背景最近西安交大大数据专业二班,开设了Java和大数据技术课程,班级人数共100人。2. 需求通过R语言完成该100位同学学号的生成,同时使用R语言模拟生成Java和大数据技术成绩,成绩满分为100,需要满足正_r语言案例分析
文章浏览阅读639次,点赞11次,收藏26次。虽然我个人也经常自嘲,十年之后要去成为外卖专员,但实际上依靠自身的努力,是能够减少三十五岁之后的焦虑的,毕竟好的架构师并不多。架构师,是我们大部分技术人的职业目标,一名好的架构师来源于机遇(公司)、个人努力(吃得苦、肯钻研)、天分(真的热爱)的三者协作的结果,实践+机遇+努力才能助你成为优秀的架构师。如果你也想成为一名好的架构师,那或许这份Java成长笔记你需要阅读阅读,希望能够对你的职业发展有所帮助。一个人可以走的很快,但一群人才能走的更远。
文章浏览阅读3.9k次,点赞9次,收藏53次。受力分析直线行驶时的车轮受力如下:水平方向上,所受合力为:F=Ft+Fw+FfF=F_t+F_w+F_fF=Ft+Fw+Ff其中,FtF_tFt为牵引力,FwF_wFw为空气阻力,FfF_fFf为滚动阻力,下面我们将逐个介绍。驱动力先来说扭矩,扭矩是使物体发生旋转的一个特殊力矩,等于力和力臂的乘积,单位为N∙mN∙mN∙m:设驱动轴的扭矩为TtT_tTt,车轮半径为rrr,那么牵引力:Ft=Tt⁄rF_t=T_t⁄rFt=Tt⁄r如何求得驱动轴扭矩TtT_tTt呢?_unity 车辆动力学模型