基于 vue 实现图片批量上传效果

效果

aaa.gif

组件

<style scoped>
.image-wrapper{
  padding:10px 10px;
}
.inputer{
  width:100px;
  height:100px;
  display:none;
}
.img-wrapper{
  display:flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: wrap;
}
.image-wrapper .upload-icon{
  margin-left:14px;
  margin-bottom:10px;
  /* overflow: hidden; */
  width:20%;
  height:70px;
  text-align: center;
  border:1px solid #dbdbdb;
}
.img-wrapper .item{
  position:relative;
  margin-left:14px;
  margin-bottom:10px;
  /* overflow: hidden; */
  width:20%;
  height:70px;
  text-align: center;
}
.img-wrapper .item .dis-image{
  width:100%;
  height:70px;
}
.image-wrapper .item .delete {
  display:inline-block;
  position:absolute;
  background-color: #dbdbdb;
  width: 20px;
  height: 20px;
  color: #fff;
  font-size: 0.8em;
  border-radius: 50%;
  top:-9px;
  right:-10px;
}

.img-wrapper .item .heng{
  position: absolute;
  display:inline-block;
  width:30px;
  height:3px;
  background:#dbdbdb;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
} 
.img-wrapper .item .su{
  position: absolute;
  display:inline-block;
  width:3px;
  height:30px;
  background:#dbdbdb;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
} 
</style>
<template>
  <div>
    <div class="image-wrapper">
      <div  class="img-wrapper">
        <div class="item" v-for="(item, index) in imgList"><img :src="item" class="dis-image"><span class="delete" @click="deleteImg(index)">X</span></div>
        <div class="item upload-icon" @click="preSelect" v-if="imgList.length < fileCount">
          <span class="heng"></span>
          <span class="su"></span>
        </div>
      </div>
      <input type="file" class="inputer" ref="inputRef" @change="handleChange" multiple="multiple" >
    </div>
    <alert v-model="showError" title="添加失败">{{errorMsg}}</alert>
  </div>
</template>
<script>
import { Alert } from 'vux';
export default {
  components: {
    Alert
  },
  name: 'imgUpload',
  props: {
    fileMaxSize: {
      type: Number,
      required: false,
      default: 200
    },
    fileCount: {
      type: Number,
      required: false,
      default: 1
    },
    fileType: {
      type: String,
      required: false,
      default: 'image/png, image/jpeg'
    }
  },
  data () {
    return {
      imgList: [],
      showError: false,
      errorMsg: ''
    };
  },
  methods: {
    preSelect () {
      this.$refs.inputRef.click();
    },

    handleChange (e) {
      /* eslint-disable */
      let BreakException = {};

      let file = e.currentTarget.files;
      if (file.length > this.fileCount || this.imgList.length > this.fileCount) {
        this.showError = true;
        this.errorMsg = '最多上传' + this.fileCount + '张图片';
        return;
      }
      try {
        _.forEach(file, element => {
          if (!element.type || this.fileType.indexOf(element.type) === -1) {
            this.showError = true;
            this.errorMsg = '图片类型错误';
            throw BreakException;
          } else if (element.size > this.fileMaxSize * 1024) {
            this.showError = true;
            this.errorMsg = '图片太大请重新上传';
            throw BreakException;
          }
        });
      } catch (error) {
        if (e !== BreakException) throw e;
      }

      _.forEach(file, element => {
        let freader = new FileReader();
        freader.readAsDataURL(element);
        freader.onload = (e) => {
          this.imgList.push(e.target.result)
        };
      });
    },

    deleteImg (ind) {
      this.imgList.splice(ind,1);
    }
  }
};
</script>

组件引入

image.png

最后，功能还在完善中，会不定时更新

对学习抱有热情的开发小伙伴欢迎加入 qq群685421881，更欢迎热爱编程的妹子进入，让我们一起学习 并进步吧！