Vue2.0 实现移动端图片上传功能


Posted in Javascript onMay 30, 2018

本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件。

效果图如下:

Vue2.0 实现移动端图片上传功能

1.DOM代码

1.1input标签

 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none

<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>

1.2添加图片按钮

 如果需要用到此方法,只需要在你的上传按钮的地方调用@click=”chooseType”即可,其他部分代码为样式布局仅供参考。

<div class="add" @click="chooseType">
 <div class="add-image" align="center">
  <i class="icon-camera"></i> //按钮中的图片是一个icon字体图标
  <p class="font13">添加图片</p>
 </div>
</div>

1.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,index) in imgList">
   <img class="del" src="../../assets/img/home/btn_clean.png" @click.stop="delImg(index)"/> 
   //del删除样式,icon字体图标需要自己找哦
   <img :src="url.file.src">
  </li>
 </ul>
</div>

1.4图片预览区域-拓展(1.3为简单运用,如果有时间后续会将完整的案例上传)

 如果需要用到此方法,只需要在你的预览区域进行v-for循环输出上传的图片集合即可。本案例还运用的Y-DUI的lightbox组件,如有需要请参照图片预览的调用方式。此处,也调用了vue的懒加载和css背景图自适应的方法。

<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,index) in imgList">
   <img class="del" src="../../assets/img/home/btn_clean.png" @click.stop="delImg(index)"/>
   <yd-lightbox>
    <div class="app-bg">
     <yd-lightbox-img class="app-bg" :original="url.file.src" v-lazy:background-image="{src: url.file.src, error: require('../../assets/img/common/img_placeholder400.png'), loading: require('../../assets/img/common/img_placeholder400.png')}"></yd-lightbox-img>
    </div>
   </yd-lightbox>
  </li>
 </ul>
</div>

2.JS代码块

tips:此处的提示弹窗调用的Y-DUI的提示框,可以改成自己的提示框。

<script>
 export default {
  name: "Feedback",
  data() {
   return {
    showFace: false,
    imgList: [],
    size: 0,
    limit:6, //限制图片上传的数量
    tempImgs:[]
   }
  },
  methods: {
   chooseType() {
    document.getElementById('upload_file').click();
   },
   fileChange(el) {
    if (!el.target.files[0].size) return;
    this.fileList(el.target);
    el.target.value = ''
   },
   fileList(fileList) {
    let files = fileList.files;
    for (let i = 0; i < files.length; i++) {
     //判断是否为文件夹
     if (files[i].type != '') {
      this.fileAdd(files[i]);
     } else {
      //文件夹处理
      this.folders(fileList.items[i]);
     }
    }
   },
   //文件夹处理
   folders(files) {
    let _this = this;
    //判断是否为原生file
    if (files.kind) {
     files = files.webkitGetAsEntry();
    }
    files.createReader().readEntries(function (file) {
     for (let i = 0; i < file.length; i++) {
      if (file[i].isFile) {
       _this.foldersAdd(file[i]);
      } else {
       _this.folders(file[i]);
      }
     }
    });
   },
   foldersAdd(entry) {
    let _this = this;
    entry.file(function (file) {
     _this.fileAdd(file)
    })
   },
   fileAdd(file) {
    if (this.limit !== undefined) this.limit--;
    if (this.limit !== undefined && this.limit < 0) return;
    //总大小
    this.size = this.size + file.size;
    //判断是否为图片文件
    if (file.type.indexOf('image') == -1) {
     this.$dialog.toast({mes: '请选择图片文件'});
    } else {
     let reader = new FileReader();
     let image = new Image();
     let _this = this;
     reader.readAsDataURL(file);
     reader.onload = function () {
      file.src = this.result;
      image.onload = function(){
       let width = image.width;
       let height = image.height;
       file.width = width;
       file.height = height;
       _this.imgList.push({
        file
       });
       console.log( _this.imgList);
      };
      image.src= file.src;
     }
    }
   },
   delImg(index) {
    this.size = this.size - this.imgList[index].file.size;//总大小
    this.imgList.splice(index, 1);
    if (this.limit !== undefined) this.limit = 6-this.imgList.length;
   },
   displayImg() {
   }
  }
 }
</script>

3.CSS样式代码块,仅供参考

太太懒了,没有一一区分

.app-bg >>>img{
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
  transform: scale(1.03);
 }
 textarea {
  padding: 10px;
 }
 .text-length {
  font-size: 14px;
  z-index: 999;
  width: 100%;
  text-align: right;
  margin-bottom: 10px;
  color: #e4e4e4;
 }
 .warning {
  color: #fe9900;
 }
 .add-img {
  width: 100%;
  padding: 10px;
 }
 .add-img p {
  color: #999;
 }
 .mui-content {
  padding-bottom: 60px;
 }
 .mui-content .idea {
  margin-top: 8px;
  background-color: #FFFFFF;
 }
 .good-item {
  text-align: center;
  width: 33%;
  max-width: 100%;
  overflow: hidden;
  padding-right: 10px;
  padding-bottom: 10px;
  float: left;
 }
 .good-item span {
  font-size: 15px;
  height: 30px;
  line-height: 30px;
  border-radius: 50px;
  display: block;
  width: 100%;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid #CCCCCC;
 }
 .mui-table {
  padding-top: 10px;
  color: #333;
  padding-left: calc(0.5% + 10px);
 }
 .h-line-behind {
  line-height: 40px;
  padding-left: 10px;
 }
 .question {
  border: 0;
  margin-bottom: 10px;
 }
 .add {
  display: inline-block;
  margin-bottom: 20px;
 }
 .add-image {
  padding-top: 15px;
  margin-left: 10px;
  width: 80px;
  top: 20px;
  height: 80px;
  border: 1px dashed rgba(0, 0, 0, .2);
 }
 .add-image .icon-camera {
  font-size: 24px;
 }
 .good-item .choose {
  color: #fff;
  background-color: #87582E;
  color: #FFF;
  border: 0;
 }
 .mui-btn-block {
  border: 0;
  border-radius: 0;
  background-color: #87582E;
  color: #fff;
  margin-bottom: 0;
  bottom: 0;
 }
 .mui-buttom {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 999;
 }
 /*九宫格*/
 .img-list {
  overflow: hidden;
 }
 .img-list > li {
  float: left;
  width: 32%;
  text-align: center;
  padding-top: 31%;
  margin-left: 1%;
  margin-top: 1%;
  position: relative;
 }
 .img-list > li > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
 }
 .img-list > li > div .app-bg {
  width: 100%;
  height: 100%;
 }
 .mui-fullscreen {
  z-index: 9999;
 }
 .del {
  position: absolute;
  width: 18px;
  top: 0;
  right: 0;
  z-index: 999
 }

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

Javascript 相关文章推荐
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
Javascript获取某个月的天数
May 30 #Javascript
JS实现键值对遍历json数组功能示例
May 30 #Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 #Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 #Javascript
浅谈如何使用webpack构建多页面应用
May 30 #Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 #Javascript
You might like
php增删改查示例自己写的demo
2013/09/04 PHP
phalcon框架使用指南
2016/02/23 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
vue实现文字加密功能
2019/09/27 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
Python进阶篇之字典操作总结
2016/11/16 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
如何基于Python批量下载音乐
2019/11/11 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
什么是反射
2012/03/17 面试题
社区道德讲堂实施方案
2014/03/21 职场文书
校园活动宣传方案
2014/03/28 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
被委托人身份证明
2015/08/07 职场文书