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

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

效果图如下：

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 移动端图片上传功能，希望对大家有所帮助