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 DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
JS字符串处理实例代码
Aug 05 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
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 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
SVG描边动画
2017/02/23 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
python删除文件示例分享
2014/01/28 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
集团薪酬管理制度
2014/01/13 职场文书
摄影展策划方案
2014/06/02 职场文书
婚礼答谢词
2015/01/04 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
行政复议决定书
2015/06/24 职场文书
中学校园广播稿
2015/08/18 职场文书
小学生教师节广播稿
2015/08/19 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技