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在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
jquery分割字符串的方法
Jun 24 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 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/12/11 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
不安全的常用的js写法
2009/09/15 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
js实现飞机大战小游戏
2020/08/26 Javascript
python高阶函数map()和reduce()实例解析
2020/03/16 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
高校优秀辅导员事迹材料
2014/05/07 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
小学开学标语
2014/07/01 职场文书
个人收入证明模板
2014/09/18 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
保管员岗位职责
2015/02/14 职场文书
团支部书记竞选稿
2015/11/21 职场文书
教师网络培训心得体会
2016/01/09 职场文书
高三化学教学反思
2016/02/22 职场文书
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang