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 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
vue实现登录拦截
Jun 29 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来实现网络服务
2009/09/15 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python中的整除和取模实例
2020/06/03 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
医学生求职自荐信
2013/10/25 职场文书
数控专业自荐书范文
2014/03/16 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
违纪检讨书范文
2015/01/27 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python