自己写的vue图片上传插件（假装是插件）

假装是插件

前言：项目使用的是vue2.x + vux + eventbus（个人练手项目，做个记录，有bug影响使用还望大佬们指点）

vuex还没看过。。。（稍微熟练了vue之后再去看吧）

说一下流程：

1、引入（废话）

2、点击（也是废话）

3、选个图片（有用的废话，不超过6M，因为试过10M的压缩太慢。。。）

4、filereader读图片（base64预览，bin二进制用来上传）

    超过2M开始压缩（带压缩提示），超过6M不处理（提示过大，原因上面说了）

5、选择完毕，显示预览图

6、继续上述操作（接收一个参数（最大图片数量））

7、删除（点击右上角xx，有时废话）

7、大功告成（了吧）

效果：

在父组件中使用：

import Bus from '../eventbus'

import upimg from '@/components/upimg'

接收：

created () {
    // console.log('router: ',this.$router);
    // 接收upimg组件 $emit的upimg数据
    Bus.$on('upimg', this.getupimg);
  },
  destroyed (){
    // 注销事件
    Bus.$off('upimg',this.getupimg);
  }

<!-- 上传文件 upnum 为最大上传图片数量 -->

<upimg :upnum='upnum'></upimg>

话不多说。。。

首先是HTML：

<template>
  <div class="upimg">
    <input :type="maxnum ? 'button' : 'file'" :value='maxnum ? "达到最大数量" : ""' id='file' @click='upfile($event)'>
    <div id='picShow'>
      <span v-for='p in picshowList'>
        <span 
          class="delPic"
          :time='p.time'
          @click='delpic($event)' >X</span>
        <img :src="p.src" alt="">
      </span>
    </div>
    <toast v-model='showToast' type="text" :width='toastwidth' :time="toasttime" is-show-mask :text="toastext" :position="toastP"></toast>
    <loading v-model="showLoading" :text="loadText"></loading>
  </div>
</template>

然后 js:

引入的包：

// 图片上传插件
import Bus from '../eventbus'
import { upImg } from '../assets/js/upimg.js'  // 这是自己写的图片选择和压缩js（jq项目写的，改成的适应vue的版本）
import { Loading } from 'vux'

components: {
    Loading
  },
  props: ['upnum'],
  data () {
    return {
      picshowList: [],
      imgnum: 1,               // 图片数量（父组件传）
      maxnum: false,           // 是否达到最大图片限制
      toastext: '',            // toast 提示的文字
      toasttime: 800,          // toast 消失倒计时
      toastwidth: 'auto',      // toast 宽度
      showToast: false,        // 是否显示 toast
      toastP: 'top',           // toast 显示的位置
      showLoading: false,
      loadText: ''
    }
  },

这个是接收父组件传来的图片数量限制

created () {
    // 接收父组件的数据
    this.imgnum = this.upnum;
    // console.log('this.upnum: ',this.upnum);
  },

这才是真正的方法：

// 图片上传插件
    upfile (e) {
      let vm = this;
      let _this = e.currentTarget;
      console.log('this.upnum: ',vm.upnum);
      console.log('vm.picshowList.length: ',vm.picshowList.length);
      console.log('读取中...');

      if(vm.picshowList.length+1 == vm.imgnum) {
        vm.maxnum = true;
      }
      if(vm.picshowList.length == vm.imgnum){
        vm.toastFn('top', `最多只能传${vm.upnum}张`);
        console.log(`最多只能传${vm.upnum}张`);
        
      }else{
        // 显示loading 
        vm.loadText = '读取中...';
        vm.showLoading = true;
        
      }
      // 读取图片
      upImg( _this, function(){
        // 压缩提示(不压缩不进来)
        console.log('图片压缩中...');
        vm.loadText = '图片压缩中...';
        vm.showLoading = true;

      }, function(res){
        // console.log('res: ',res);
        // binsrc: 用于上传到服务器
        // src: 用于图片预览
        if(res.err){    // 图片大于6m
          vm.toastwidth = '80vw';
          vm.toasttime = 1500,
          vm.toastFn('top', res.err);
        }
        if(res.src){
          vm.picshowList.push({
            binsrc: res.binsrc,
            src: res.src,
            time: new Date().getTime()
          })
          vm.upbus();
          setTimeout(() => {
            vm.showLoading = false;
          },300)
        }
      })
      setTimeout(function() {
        if(vm.showLoading){
          vm.showLoading = false;
        }
      },3000);

    }

删除图片：

// 点击 xx 移除元素
    delpic (img) {
      let vm = this;
      img = img.currentTarget;
      let time = img.getAttribute('time');
      let imgPar = img.parentNode;
      for(var i=0; i<vm.picshowList.length; i++){
        if(vm.picshowList[i].time == time){
          // console.log('vm.picshowList[i]: ',vm.picshowList[i]);
          // 删除数据
          vm.picshowList.splice(i, 1);
          vm.upbus();
        }
      }
      if(vm.picshowList.length < vm.upnum){
        vm.maxnum = false;
      }
      // console.log('vm.picshowList: ',vm.picshowList);
    },

传给父组件（eventbus）

upbus () {
      Bus.$emit('upimg', this.picshowList);
    }

beforeDestroy () {
    this.upbus();
  },
  destroyed () {
    // 注销事件
    Bus.$off('upimg', this.upbus);
  }

接着是提示的框框（拿vux-toast自己随便封装一下）

// toast 弹窗
    toastFn (toastP, text) {
      this.toastP = toastP
      this.showToast = true
      this.toastext = text

    },

到此结束，，，感觉怪怪的

还有github地址奉上：https://github.com/zero9527/vuxtest.git

https://github.com/zero9527/vuxtest.git

https://github.com/zero9527/vuxtest.git

https://github.com/zero9527/vuxtest.git