Vue2.0实现手机图片上传功能

本文主要介绍了VUE2.0图像上传功能的实现。其原理是通过js控件和输入标签来实现这一效果，而无需加载其他组件。

效果图如下：

1.DOM代码

1.1输入标签

因为我们通过输入标签上传图片，但是输入标签的样式有点难看，所以我们隐藏了style display: none

input @ change=' file change($ event)' type=' file ' id=' upload _ file ' multiple style=' display : none '/1.2添加图片按钮

如果需要使用这个方法，只需要在你的上传按钮上调用@ @ click=“choose type”，其他代码都是样式布局，仅供参考。

div class=' Add ' @ click=' choose type ' div class=' Add-image ' align=' center ' I class=' icon-camera '/I//按钮中的图片是图标字体图标p class='font13 '添加图片/p /div/div1.3图片预览区域

如果你需要使用这个方法，你只需要在你的预览区域执行一个v-for循环来输出上传的图片集。

div class=' add-img ' v-show=' imglist。length' p class=' font14 '图片(最多6张，span v-text=' 6-imglist。length/span也可以上传)/p ul class=' img-list ' Li v-for='(URL > in imglist ' img class=' del ' src=' http :/./assets/img/home/BTN _ clean . png ' @点击。stop=' deling (index)'///del删除样式。图标字体图标需要自己找。img : src=' http 3360 URL . file . src '/Li/ul/div 1.4图片预览区-扩展(1.3为简单使用，有时间会上传完整案例)

如果你需要使用这个方法，你只需要在你的预览区域执行一个v-for循环来输出上传的图片集。Y-DUI的灯箱组件也用于这种情况。如有需要，请参考图片预览的调用方法。这里还调用了vue的惰性加载和css背景图片的自适应方法。

div class=' add-img ' v-show=' imglist。length' p class=' font14 '图片(最多6张，span v-text=' 6-imglist。长度'/span也可以上传)/p ul class=' img-list ' Li v-for='(URL索引)in imgList ' img class=' del ' src=' http :/./assets/img/home/BTN _ clean . png ' @ click . stop=' delImg(index)'/yd-light box div class=' app-BG ' yd-light box-img class=' app-BG ' : original=' URL . file . src ' v-lazy : background-image=' { src : URL . file . src，Error : require('././assets/img/common/img _ placeholder 400 . png ')，加载：需要('././assets/img/common/img _ placeholder 400 . png ' } '/yd-light box-。

提示：这里的提示弹出窗口调用的Y-DUI的提示框可以改成自己的提示框。

脚本导出默认{ name: 'Feedback '，data(){ return { show face : false，imgList: []，size : 0 0，limit:6，//限制图片上传的数量tempImgs:[] } }，方法： {选择类型(){ document。getelementbyid(' upload _ file ').单击();}，fileChange(el) { if(！el.target.files[0].大小)返回；这个。文件列表(El。目标)；el.target.value='' }，fileList(fileList){ let files=fileList。文件；用于(设I=0；我。文件。长度；i ) { //判断是否为文件夹如果(文件[i].打字！=' '){这个。文件ADd(文件[I])；} else { //文件夹处理这个。文件夹(文件列表。项目[一])；} } }, //文件夹处理文件夹（文件){ let _ this=this//判断是否为原生文件if(文件。kind){ files=files。webkitgetsentry()；} files.createReader().readEntries(函数（文件){ for(让I=0；一。文件长度；i ) {如果(文件[i].isFile) { _this.foldersAdd(文件[I])；} else { _this.folders(文件[I])；} } });}，文件夹添加(条目){ let _ this=thisentry.file(函数（文件){ _this.fileAdd(文件)}) }，文件添加(文件){ if (this.limit！==未定义)这一点。极限-；if (this.limit！==未定义this.limit 0)返回；//总大小这个。大小=这个。大小文件。大小；//判断是否为图片文件if(文件。打字。indexof(' image ')==-1){ this .$dialog.toast({mes: '请选择图片文件'});} else { let reader=new FileReader()；让Image=new Image()；让这=这；reader.readAsDataURL(文件);读者。onload=function(){ file。src=这个。结果；图像。onload=function(){ let width=image。宽度；让高度=image . height file . width=width file . height=height _ this。IMglist。push({ file })；控制台。log(_ this。IMglist)；};图像。src=文件。src} } }，delImg(index){ this。大小=这个。尺寸-这个。imglist[索引]。文件。大小；//总大小this.imgList.splice(索引，1);if (this.limit！==未定义)这个。极限=6-这个。IMglist。长度；}，displayImg() { } } }/script3 .半铸钢钢性铸铁(铸造半钢)样式代码块，仅供参考

太太懒了，没有一一区分。app-BG img {宽度： 100%；高度： 100%;-webkit-transform:比例尺(1.03);-moz-transform:秤(1.03);-ms-transform:刻度(1.03);-o型变压器：刻度(1.03);变压器：标度(1.03);} textarea { padding: 10px }。文本长度{ font-size : 14pxz指数： 999；宽度： 100%;文本对齐：右侧；边距-底部： 10px颜色： # E4 E4；} .警告{ color: # fe9900}。add-img { width : 100%；padding: 10px }。add-img p { color : # 999；} .mui-content { padding-bottom : 60px；} .mui-内容idea { margin-top : 8px；背景-color : # FFFFFF；} .好项目{ text-align :居中；宽度： 33%;最大宽度： 100%;飞越：隐藏；填充-右： 10px填充-底部： 10px向左浮动：} .好项目span { font-size : 15px高度： 30px线高： 30px边界半径： 50px显示器：块；宽度： 100%;颜色： # 333飞越：隐藏；空白： nowrap文本-飞越：省略号；border: 1px固体# CCCCCC；} .mui-table { padding-top : 10px；color : # 333 add-left : calc(0.5% 10px)；} .h线后方{线高： 40px左填充： 10px} .问题{边框： 0；边距-底部： 10px} .添加{显示：内联块；边距-底部： 20px} .add-image { padding-top : 15px；左边距left: 10px宽度： 80pxtop: 20px高度： 80pxborder: 1px虚线rgba(0，0，0，2);} .添加图像icon-camera { font-size : 24px；} .好东西。选择{ color: # fff背景色-: # 87582 E；颜色： # FFF；边框： 0；} .mui-BTN-区块{边界： 0；边界半径： 0;背景色-: # 87582 E；color: # fff保证金-底部： 0;底部： 0；} .mui-buttom { position:固定；宽度： 100%;底部： 0；z指数： 999；} /*九宫格*/.img-list { overflow:隐藏；} .img-列表li {左侧浮动：宽度： 32%;文本对齐：中心；填充-前：位31%；左边距： 1%;利润率-前：名1%；相对位置：} .img-list Li div {绝对位置：左： 0；top : 0；宽度： 100%;高度： 100%;飞越：隐藏；} .列表里分区app-BG {宽度： 100%；高度： 100%;} .mui-全屏{ z-index : 9999} .德尔{ position:绝对值；宽度： 18pxtop : 0；右： 0；z-index: 999 }总结

以上所述是小编给大家介绍的Vue2.0移动端图片上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！