vue上传图片组件编写代码

2024-04-22 15:51:23

本文实例教大家如何编写一个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);
 }

最终效果如下：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

一.前言三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期
require.js+vue开发微信上传图片组件

由于项目是thinkPHP做后端框架,一直以来都是多页面的后端路由,想使用火热的webpack有点无从下手(原谅我太菜,而且推广vue只有我一个人--),没办法,想把vue用起来,唯有在原来的基础上改进.使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件,这样每一个组件就是一个 .vue 文件,哪里用上这个组件就引入进来,维护起来确实很爽.然而一直以来项目用的都是require.js,那又想以这样的形式来组织vue组件,还要加上vue-router和vue-resou
Vue上传组件vue Simple Uploader的用法示例

在日常开发中经常会遇到文件上传的需求,vue-simple-uploader 就是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件,自带 UI,可覆盖.自定义:先来张动图看看效果: 其主要特点就是: 支持文件.多文件.文件夹上传支持拖拽文件.文件夹上传统一对待文件和文件夹,方便操作管理可暂停.继续上传错误处理支持"快传",通过文件判断服务端是否已存在从而实现"快传" 上传队列管理,支持最大并发上传分块上传支持进度.预估剩
vue上传图片组件编写代码

本文实例教大家如何编写一个vue上传图片组件,具体如下 1.首先得有一个[type=file]文件标签并且隐藏,changge事件来获取图片: <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> 2.触发隐藏的文件标签:(通过原生的click来触发) document.ge
vue分页器组件编写方法详解

使用vue编写的分页器组件,支持输入页码跳转,效果如图: 1.点击前五页: 2.点击中间部分页面 3.点击第一页,上一页按钮失效,点击最后一页,下一页按钮失效组件调用: //html调用参数:pageSize(总页数);pageNo(当前页) <pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager> //组件引入 import pager
Vue分页组件实例代码

当前组件依赖bootstrap样式,使用前请先引用相关css. Vue.component('pagination', { template: `<nav aria-label="Page navigation"> <ul class="pagination"> <li :class="{'disabled': pageNum == 1}"><a href="#" v-on:click
vue购物车插件编写代码

本文实例为大家分享了vue购物车插件的具体代码,供大家参考,具体内容如下先上效果图下面相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-sca
vue封装组件之上传图片组件

本文实例为大家分享了vue上传图片组件的封装具体代码,供大家参考,具体内容如下未上传状态上传状态其他状态(查看/删除) 自定义组件文件名称 - 这里叫UploadImg.vue <template> <div> <el-form>  <el-upload :limit="limit" //最大允许上传个数 action accept="
vue 计时器组件的实现代码

整理文档,搜刮出一个vue 计时器组件的代码,稍微整理精简一下做下分享. <template> <div> <span :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal" >{{countString}}</span> </div> </template> <script> ex
vue组件编写之todolist组件实例详解

我们在topNav这个页面上插入一个todolist子组件我不知道怎么回事,这里的markdown的代码总是串行..所以代码看得不舒服,见谅啊,我最后会放github的源代码地址. 1. 父组件topNav中注册子组件,引入子组件 <template> <div> <p>下面这一行就是定义的组件名称</p> <todo-list></todo-list> <router-view></router-view>
vue递归组件实战之简单树形控件实例代码

1.递归组件-简单树形控件预览及问题在编写树形组件时遇到的问题: 组件如何才能递归调用? 递归组件点击事件如何传递? 2.树形控件基本结构及样式 <template> <ul class="vue-tree"> <li class="tree-item"> <div class="tree-content"> <div class="expand-
Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)

目录方式一:通过监听事件实现方式二:通过 v-model 实现方式一:通过监听事件实现父组件将数据传递给子组件通过 props 实现:而子组件将数据传递给父组件通过事件来实现,在子组件中定义一个事件,在该事件中传递值,由父组件中监听这个事件.通过这种方式实现父子组件双向绑定的效果最常见. 子组件案例代码: <template> <el-select v-model="value" placeholder="请选择" @change=&quo

vue上传图片组件编写代码

相关推荐

随机推荐