移动端vue实现图片上传功能 九宫格
移动端的图片上传思路
理清思路：
- 分析ui:
- 设计html结构
- 数据
- 代码
- 分析ui，理需求
- 上边一行字：提示上传
- 下边是上传的图片展示，最多九张。逻辑：上传张数0，只显示加号图，上传张数大于0小于9，显示图片，九宫格方式，3*3 最后一张为加号图。上传张数等于9，展示上传图片。
- 点击加号图，添加图片，操作数据
- 点击叉号，删除图片，操作数据
- 设计html，理结构及交互
- 大的div包含两个小块，提示区和图片操作区
- 提示区：p标签+样式，无交互
- 图片操作区：box 包含div 个数由数据渲染，用 flex布局，实现居中和对齐，单个图片div用定位实现差号。逻辑控制加号图展示的方式。
- 点加号，数组添加数据，点叉号，数组减少数据
- 数据
- 点击上传后获取到的数据如下。上传的逻辑一般是调用了手机底层接口，可参考其他文档。
uploadData:{
"count":3,//个数
"type":"image",//文件类型
//文件数组
"data":
[
{
"fileId":"78147331777859611",//ID
"fileUrl":"http://pic1.win4000.com/wallpaper/2018-07-19/5b50781d328f1.jpg",//链接
"fileName":"a.jpg", //名称
"fileSize":"43168",//大小
"fileType":"jpg"//类型
},
{
"fileId":"78147331777859611", "fileUrl":"http://pic1.win4000.com/wallpaper/9/58b0f41ad200b.jpg",
"fileName":"b.jpg",
"fileSize":"43168",
"fileType":"jpg"
},
{
"fileId":"78147331777859611",
"fileUrl":"http://b-ssl.duitang.com/uploads/item/201704/19/20170419063305_WE842.jpeg",
"fileName":"c.jpg",
"fileSize":"43168",
"fileType":"jpg"
}
]}
- 代码
- html
// html
<div class = 'upload'>
<p>最多上传9个文件，拖拽文件可调整顺序</p>
<div class = 'fileBox'>
<div
class = 'fileItem'
v-for = "(file) in uploadData.data"
v-bind:key = 'file.fileId'
>
<img :src = 'file.fileUrl' />
<div
class = 'delFileButton'
v-on:click.self.stop = 'delFile(file)'></div>
</div>
<div
v-show = 'uploadData.count < 9'
class = 'fileItem addfileItem'
@click.self.stop = 'addFile'>
<div
class = 'addFile'
>
</div>
</div>
</div>
</div>
- css
// css less格式，可自行转化
html{
// rem+vw布局
font-size: 26.67vw;
}
.upload{
width: 100%;
height: auto;
p{
width: 100%;
font-size: .14rem;
font-weight:400;
color:rgba(185,187,197,1);
margin-bottom: .19rem;
margin-top: .11rem;
/* line-height:16px; */
}
.fileBox{
display: flex;
flex-wrap: wrap;
justify-content:flex-start;
align-items:flex-start;
align-content:flex-start;
.fileItem{
width: 24vw;
height: 24vw;
margin: .08rem;
background:rgba(255,255,255,1);
border-radius:3px;
position: relative;
img{
width: 100%;
height: 100%;
}
.delFileButton{
width: .18rem;
height: .18rem;
position: absolute;
top: -0.06rem;
right: -0.06rem;
/* background: url(./.././assets/uploadDel.png); */
background-color: #000;
border-radius: 50%;
color:#fff;
}
}
.addfileItem{
border:1px solid rgba(25,31,37,0.12);
position: relative;
.addFile{
width: .4rem;
height: .4rem;
position: absolute;
top: 50%;
left: 50%;
transform : translate(-50%,-50%);
background-color: red;
}
}
}
}
- js
// vue js
<script>
export default {
name: "app",
data() {
return {
uploadData:{
"count":5, //个数
"type":"image",//文件类型
//文件数组
"data":[
{
"fileId":"78147331777859611",//ID
"fileUrl":"http://pic1.win4000.com/wallpaper/2018-07-19/5b50781d328f1.jpg",//链接
"fileName":"a.jpg", //名称
"fileSize":"43168",//大小
"fileType":"jpg"//类型
},
{
"fileId":"78147331777859611",
"fileUrl":"http://pic1.win4000.com/wallpaper/9/58b0f41ad200b.jpg",
"fileName":"b.jpg",
"fileSize":"43168",
"fileType":"jpg"
},
{
"fileId":"78147331777859611",//ID
"fileUrl":"http://pic1.win4000.com/wallpaper/2018-07-19/5b50781d328f1.jpg",//链接
"fileName":"a.jpg", //名称
"fileSize":"43168",//大小
"fileType":"jpg"//类型
},
{
"fileId":"78147331777859611",
"fileUrl":"http://pic1.win4000.com/wallpaper/9/58b0f41ad200b.jpg",
"fileName":"b.jpg",
"fileSize":"43168",
"fileType":"jpg"
},
{
"fileId":"78147331777859611",
"fileUrl":"http://b-ssl.duitang.com/uploads/item/201704/19/20170419063305_WE842.jpeg",
"fileName":"c.jpg",
"fileSize":"43168",
"fileType":"jpg"
}
]
}
};
},
methods:{
//上传文件函数
addFile:function(){
//调用原生接口，push数据到data
alert('add');
},
//删除数据
delFile:function(file){
this.uploadData.data.splice(this.uploadData.data.indexOf(file),1);
this.uploadData.count--;
}
//提交功能拿数据自行补充哈
}
</script>
下边真的可以不看 -----
想学习一些前端的书籍吗，我都帮你整理好啦！评论打出你想读的书，给你最全的笔记干货
超级全的前端知识，面试必备、系统复习必备哟哟哟
有想法评论提出哈，欢迎交流，小编也是渣渣一枚呢～一起进步呗
这次真的可以不看 -----
点个收藏呗，要不赞一个呗，小编手都敲累了，但还是持续加更呢～