移动端vue实现图片上传功能 九宫格

移动端vue实现图片上传功能 九宫格

移动端的图片上传思路

理清思路：

1. 分析ui:
2. 设计html结构
3. 数据
4. 代码

• 分析ui，理需求
  • 上边一行字：提示上传
  • 下边是上传的图片展示，最多九张。逻辑：上传张数0，只显示加号图，上传张数大于0小于9，显示图片，九宫格方式，3*3 最后一张为加号图。上传张数等于9，展示上传图片。
  • 点击加号图，添加图片，操作数据
  • 点击叉号，删除图片，操作数据
• 设计html，理结构及交互
  • 大的div包含两个小块，提示区和图片操作区
  • 提示区：p标签+样式，无交互
  • 图片操作区：box 包含div 个数由数据渲染，用 flex布局，实现居中和对齐，单个图片div用定位实现差号。逻辑控制加号图展示的方式。
  • 点加号，数组添加数据，点叉号，数组减少数据
• 数据
  • 点击上传后获取到的数据如下。上传的逻辑一般是调用了手机底层接口，可参考其他文档。

uploadData:{
"count":3,//个数
"type":"image",//文件类型
//文件数组
"data":
[{"fileId":"78147331777859611",//ID"fileUrl":".jpg",//链接		"fileName":"a.jpg", //名称"fileSize":"43168",//大小"fileType":"jpg"//类型},{"fileId":"78147331777859611",					     "fileUrl":".jpg",			   				"fileName":"b.jpg","fileSize":"43168","fileType":"jpg"},{"fileId":"78147331777859611","fileUrl":".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 = &#unt < 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":".jpg",//链接		"fileName":"a.jpg", //名称"fileSize":"43168",//大小"fileType":"jpg"//类型},{"fileId":"78147331777859611","fileUrl":".jpg",			   				"fileName":"b.jpg","fileSize":"43168","fileType":"jpg"},{"fileId":"78147331777859611",//ID"fileUrl":".jpg",//链接		"fileName":"a.jpg", //名称"fileSize":"43168",//大小"fileType":"jpg"//类型},{"fileId":"78147331777859611","fileUrl":".jpg",			   				"fileName":"b.jpg","fileSize":"43168","fileType":"jpg"},{"fileId":"78147331777859611","fileUrl":".jpeg",			   					    "fileName":"c.jpg","fileSize":"43168","fileType":"jpg"}]}};},methods:{//上传文件函数addFile:function(){//调用原生接口，push数据到dataalert('add');},//删除数据delFile:function(file){this.uploadData.data.splice(this.uploadData.data.indexOf(file),1);unt--;}//提交功能拿数据自行补充哈}</script>

下边真的可以不看 -----

想学习一些前端的书籍吗，我都帮你整理好啦！评论打出你想读的书，给你最全的笔记干货

超级全的前端知识，面试必备、系统复习必备哟哟哟

有想法评论提出哈，欢迎交流，小编也是渣渣一枚呢～一起进步呗

这次真的可以不看 -----

点个收藏呗，要不赞一个呗，小编手都敲累了，但还是持续加更呢～