假装是插件

前言：项目使用的是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,        // 是否显示 toasttoastP: '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){    // 图片大于6mvm.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

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

七牛云 vue 图片上传简单解说，js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片一.七牛云简介首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
Vue 图片上传功能
Vue 图片上传功能 Vue 图片上传功能,自定义上传限制上传类型 & 多选: ① accept 属性只能与配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性 ...
vue图片上传及压缩组件的封装
vue图片上传及压缩组件的封装源码地址使用方法: 先去上面的链接把组件,复制到自己的components文件夹内 1.先下载 cnpm install compressorjs --save-de ...
.net core image怎么保存_轻量级Vue图片上传插件——Vue-core-image-Upload
介绍 vue-core-image-upload 是一款轻量级的 Vue.js 上传插件,它可以支持的图片的上传,裁剪,压缩.它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程 ...
vue实现PS效果，鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字（类似QQ截图输入文字）、vue图片上传转base64...
因为涵盖的小细节比较多,所以代码比较长,建议大家复制运行来进行对应功能查看,我在代码中添加了大量的注释,以供大家阅读代码最终效果部分细节 1.鼠标选点时可能会超出底图位置 2.图片的backgro ...
【工具】vue 图片上传(单张/多张)
本文单传组件取自若依微服务为版ruoyi-ui:http://doc.ruoyi.vip/ruoyi-cloud/ 环境: vue@2.6.12 element-ui@2.15.3 1.图片上传(单张 ...
Vue图片上传删除预览操作
样式是通过element-ui实现的,使用的时候要先导入所需组件 html  <!-- on-prev ...
springboot+vue图片上传显示
1.启动类 @Override//图片上传的public void addResourceHandlers(ResourceHandlerRegistry registry) {registry.ad ...
若依-vue图片上传本地改OSS前台以及后台-附带oss图片上传工具类
阿丹: 在二次开发若依的过程中发现若依的图片上传的默认的是在本地,在spring-vue版本中,如果要将平台上线那么就需要考虑这个问题,要使用fastdfs或者oss来完成代替本地的图片上传. 本篇文 ...
vue前端上传文件夹的插件_基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件...
1. 前言之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而后端大佬说我们要实现分片上传.秒传以及断点 ...

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