好资源导航 » 文章资讯 » vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

2023-08-11 19:28:05 57

说在前面

网上有很多种文件上传的方法，根据公司最近的业务需求，要求实现多种文件的上传，在实现过程中，查阅了很多资料，最后，终于把功能实现了，开心！

上述html代码是在同一页面根据前一页面传回的columnName的值来判断需要上传哪种类型文件。



.upload{
padding:140px36px160px36px;
box-sizing:border-box;
}

.forPreview_video{
position:relative;
/*background:rgba(0,0,0,.7);*/
video{
width:95%;
max-height:430px;
}
.delte{
position:absolute;
right:0;
bottom:0;
}
}
.forPreview_doc,.forPreview_audio{
display:flex;
margin-bottom:10px;
align-items:center;
img{
width:56px;
height:56px;
margin-right:20px;
}
span:nth-of-type(1){
flex:1;
}
span:nth-of-type(2){
margin-right:20px;
}
}
.forPreview_pic{
display:flex;
align-items:flex-end;
img{
width:160px;
height:160px;
}
}

.diy-detail{
width:100%;
overflow:hidden;

.btn{
span{
margin-bottom:10px;
}
}
.van-cell{
background-color:#F0F0F0;
border-radius:35px;
font-size:26px;
height:69px;
line-height:69px;
padding:022px;
color:#999;
}
.van-hairline--top-bottom::after,.van-hairline-unset--top-bottom::after{
border-width:0;
}
p{
height:64px;
line-height:64px;
font-size:32px;
color:#333;
position:relative;
padding-left:16px;
}
p::before{
position:absolute;
top:0;
left:0;
content:'*';
color:#FF0000;
}

span{
display:inline-block;
width:157px;
background:#F0F0F0;
border-radius:35px;
color:#999;
font-size:26px;
padding:14px18px;
margin-right:28px;
text-align:center;
}
.active{
color:#fff;
background:linear-gradient(toright,#FD5130,#FA6C34);
}
}
.diy-submit{
position:fixed;
height:150px;
width:90%;
bottom:0;
background:#fff;

.van-button{
width:100%;
height:90px;
border-radius:45px;
font-size:36px;
color:#fff;
background:linear-gradient(toright,#FD5130,#FA6C34);
top:50%;
transform:translate(0,-50%);
}
.van-button--default{
border:none;
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

热门推荐

随机推荐