vue上传图片组件编写

vue上传图片组件编写点击打开源码编写一个vue上传图片组件:1.首先得有一个[type=file]文件标签并且隐藏,changge事件来获取图片:2.触发隐藏的文件标签:(通过原生的click来触发)document.getElementById(‘upload_file’).click()3.获取file文件里面的值方法:fileChange($event)fileCha

大家好,又见面了,我是你们的朋友全栈君。

点击打开源码 https://github.com/317482454/vue_upload

在线查看地址:http://jqvue.com/demo/vue_upload/demo.html

编写一个vue上传图片组件:

1.首先得有一个[type=file]文件标签并且隐藏,changge事件来获取图片:

    <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>

2.触发隐藏的文件标签:(通过原生的click来触发)

  document.getElementById('upload_file').click()

3.获取file文件里面的值方法:fileChange($event)

  fileChange(el){
      if (!el.target.files[0].size) return;//判断是否有文件数量
      this.fileList(el.target.files);//获取files文件组传入处理
      el.target.value = ''//清空val值,以便可以重复添加一张图片
    }

4.处理files文件组

获取传入单个图片文件

 fileList(files){
      for (let i = 0; i < files.length; i++) {
        this.fileAdd(files[i]);
      }
    }

处理获取到的图片文件,统计文件大小,转图片为base64以供显示

 fileAdd(file){
      this.size = this.size + file.size;//总大小
      let reader = new FileReader();
      reader.vue = this;
      reader.readAsDataURL(file);
      reader.onload = function () {
        file.src = this.result;
        this.vue.imgList.push({
          file
        });
      }
    },

5.文件大小换算

   bytesToSize(bytes){
      if (bytes === 0) return '0 B';
      let k = 1000, // or 1024
        sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
        i = Math.floor(Math.log(bytes) / Math.log(k));
      return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
    },


6.拖拽上传

<div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
     或者将文件拖到此处
</div>
  dragenter(el){
      el.stopPropagation();
      el.preventDefault();
    },
    dragover(el){
      el.stopPropagation();
      el.preventDefault();
    },
    drop(el){
      el.stopPropagation();
      el.preventDefault();
      this.fileList(el.dataTransfer.files);
    }

最终效果如下:


vue上传图片组件编写


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149505.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 从闭包函数的变量自增的角度 – 解析js垃圾回收机制

    从闭包函数的变量自增的角度 – 解析js垃圾回收机制

  • Google Buzz掀起新一轮隐私权争议「建议收藏」

    Google Buzz掀起新一轮隐私权争议「建议收藏」Google本周开始于全球的Gmail帐号中部署GoogleBuzz社交服务,不过,新上线的GoogleBuzz旋即引来外界对其隐私政策的质疑。GoogleBuzz可整合状态更新、连结、照片及影片等社交分享功能,移动版还加上了位置分享功能。引起隐私争议的其中一项功能为GoogleBuzz可自动找出使用者在Gmail中最常联系的好友并产生追随/被追随名单,而且使用者追随/被追随的对象列…

    2022年10月15日
  • C语言学生成绩管理系统(设计报告和全部源码)「建议收藏」

    C语言学生成绩管理系统(设计报告和全部源码)「建议收藏」实现如下功能:1)能够实现学生成绩信息的插入、删除和修改;2)能够实现各种查询(分别根据学生学号、姓名、课程名称等);3)能够实现按照考试成绩、总评成绩进行排序;4)能够查询某门课程的最高分、最低分并输出相应学生信息;5)能够查询某门课程的优秀率(90分及以上)、不及格率;学生成绩管理系统设计与实现1)系统功能模块学生成绩管理系统主要功能是。。。。模块结构如“图1-1系统功能结构图”所示。图1-1系统功能结构图我是事先定义了:typedefstructNode{in

  • 【python】python获取时间戳「建议收藏」

    【python】python获取时间戳「建议收藏」在阿里云物联网发送属性信息的时候,报文体为:{“id”:1630031333953,”params”:{},”version”:”1.0″,”method”:”thing.event.property.post”}其中里面的id为毫秒时间戳的信息在python里面获取时间戳可以用以下代码:importtimeprint(time.time())print(int(time.time()))#获取秒时间戳print(int(time.time()*1000))#获取毫秒时间戳pri

  • 什么是SQL游标?[通俗易懂]

    什么是SQL游标?[通俗易懂]1.1游标的概念游标(Cursor)它使用户可逐行访问由SQLServer返回的结果集。使用游标(cursor)的一个主要的原因就是把集合操作转换成单个记录处理方式。用SQL语言从数据库中检索数据

  • 删除链表倒数第n个节点_求链表的倒数第m个元素

    删除链表倒数第n个节点_求链表的倒数第m个元素原题链接给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。进阶:你能尝试使用一趟扫描实现吗?示例 1:输入:head = [1,2,3,4,5], n = 2输出:[1,2,3,5]示例 2:输入:head = [1], n = 1输出:[]示例 3:输入:head = [1,2], n = 1输出:[1]提示:链表中结点的数目为 sz1 <= sz <= 300 <= Node.val <= 1001 <= n <= s

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号