vue图片上传组件使用详解


Posted in Javascript onDecember 23, 2019

vue图片上传组件,供大家参考,具体内容如下

最近在做项目的时候顺便补充了一下公司项目的公共组件库,刚刚手头事情告一段落,就来做个笔记。

首先来看看最终效果

1.不允许删除

 vue图片上传组件使用详解

vue图片上传组件使用详解

2.允许用户删除(显示删除按钮)

vue图片上传组件使用详解

实现的效果就是上图显示内容

接下来说说组件布局那部分直接上代码了

<template>
 <div class="uploadImg">
 <div class="upload-content">
  <div class="upload-title">
  <p>{{upTitle}}</p>
  <p class="show-num">{{upNum}}/{{uploadNum}}</p>
  </div>
  <ul class="img-list">
  <li class="show-img" v-for="(item, index) in imgList" :key="index">
   <img :src="item" alt="">
   <kk-icon :class="isDel == true ? '' : 'hide-del'" name="error" color="#FF685D" size="0.4rem" @click.native="delImg(index)"></kk-icon>
  </li>
  <div class="uploadSec">
   <img :src="globalPath+'img/insurance/upload.png'" alt="上传图标">
   <input type="file" value="" id="choose" @change='onUpload' multiple>
  </div>
  </ul>
 </div>
 </div>
</template>

上面代码中的kk-icon是自定义的图标组件,只是多了个接受颜色和大小的功能,你们自己写一个替换就行了。然后动态定义它的class,实现显隐就结束了。

随手贴个样式

<style lang="less" type="text/less" rel="stylesheet/less">
 .uploadImg{
 text-align: left;
 .upload-content{
  margin-left: 0.3rem;
  .upload-title{
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.3rem 0.3rem 0;
  .show-num{
   color: #c9c9c9;
  }
  }
  .img-list{
  display: inline-block;
  margin: 0.6rem 0.3rem 0.3rem 0;
  .show-img{
   position: relative;
   display: inline-block;
   margin-right: 0.12rem;
   height: 1.3rem;
   width: 1.3rem;
   img{
   width: 100%;
   height: 100%;
   }
   .hide-del{
   display: none;
   }
   .yd-icon-error{
   position: absolute;
   top: 0;
   right: 0;
   }
  }
  .uploadSec{
   position: relative;
   display: inline-block;
   width: 1.3rem;
   height: 1.3rem;
   overflow: hidden;
   img{
   width: 100%;
   height: 100%;
   }
   #choose{
   position: absolute;
   height: 100%;
   left: 0;
   top: 0;
   opacity: 0;
   }
  }
  }
 }
 }
</style>

接下来看看实现逻辑

借助input type="file"实现图片选择,是否允许多选图片的话是通过给input的multiple属性。(其他直接备注在里面了)
在组件中接收父组件传来的图片数量限制,是否开启删除操作,上传图片地址,预览地址等

props: ['imgNum','title','upUrl','showUrl','showDel'],

title 上传组件的标题
imgNum 上传图片数量限制
upUrl 设置上传图片地址
showUrl设置图片回显地址
showDel是否允许删除图片
changeNum 图片改变时,触发父组件中的方法

当选择图片确定后就会触发change,因此我在@change="onUpload" 进行上传,上传使用了formData

// 上传操作
onUpload (e) {
 let photoFile = e.target
 let val = e.target.value
 // 判断是否符合上传条件
 if (photoFile.files.length === 0) return false
 for (let i = 0; i < photoFile.files.length; i++) {
 this.fileAdd(photoFile.files[i],i)
 }
}

上传操作中触发图片后续处理方法fileAdd

因为后台要求拿到的图片地址是一串字符串,所以我在下面中使用join() 进行数组转化处理(因为后台不支持接受图片数组,因此我这个上传多选图片之后上传也是单张上传)

// 添加图片
fileAdd (file,index) {
 let csrf_token = this.getCookie('XSRF-TOKEN');
 let formFile = new FormData();
 let imgName = 'img0';
 formFile.append(imgName, file);
 formFile.append("_token", csrf_token);
 let name = file.name
 let size = file.size
 let types = '.jpg,.jpeg,.png,.gif' //文件格式
 let fileExt = name.substring(name.lastIndexOf('.')).toLowerCase()
 let result = types.indexOf(fileExt)
 if (result < 0) {  //验证图片格式
 this.$dialog.toast({
  mes: '图片格式不正确',
  timeout: 1000
 })
 return false
 }
 if (size > 1 * 1024 * 1024) {
 this.$dialog.toast({
  mes: '图片大小不能大于1M',
  timeout: 1000
 })
 return false
 }
 if (this.fileList.length >= this.uploadNum) {
 this.$dialog.toast({
  mes: '图片最多只能上传' + this.uploadNum + '张',
  timeout: 1000
 })
 return false
 }

 axios.post(this.upUrl,formFile)
 .then((res) => {
  this.upNum = this.fileList.length + 1; //计算图片数量
  this.fileList.push(file);    //添加进图片数组
  let imgUrl = this.showUrl + res.data.data; //图片回显地址
  let upImg = res.data.data;    //传给后台的图片地址
  this.imgList.push(imgUrl);
  this.upImgList.push(upImg);
  let upImgAll = this.upImgList.join(',');
  this.$emit('input', upImgAll);
 }).catch((err) => {
  console.log(err);
 })
},

删除图片操作

我这删除仅仅是对最后提交的图片数组进行处理,并未对上传到图片服务器上的图片进行移除处理

// 删除图片
delImg (index) {
 this.imgList.splice(index, 1);
 this.fileList.splice(index, 1);
 this.upNum = this.imgList.length;
 let imgAll = this.imgList.join(',');
 this.$emit('input', imgAll);
},

最后我在组件中监听了图片改变

watch: {
 imgList () {
  this.$emit('changeNum'); //触发父组件中验证资料是否完整的方法
 }
 },

就是这样了,一个简易的上传组件(写的不是很好,轻喷),还有可以优化的地方,后面改完再看看吧

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
理解javascript异步编程
Jan 27 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
js闭包的9个使用场景
Dec 29 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 Javascript
微信小程序实现签字功能
Dec 23 #Javascript
使用JS location实现搜索框历史记录功能
Dec 23 #Javascript
vue实现移动端图片上传功能
Dec 23 #Javascript
vue实现拖拽效果
Dec 23 #Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 #jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 #jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 #jQuery
You might like
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
python实现爬取图书封面
2018/07/05 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
美国健康和保健平台:healtop
2020/07/02 全球购物
类的核心特性有哪些
2014/01/01 面试题
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
行政总经理岗位职责
2013/12/05 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
详细介绍python类及类的用法
2021/05/31 Python