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 相关文章推荐
怎么用javascript进行拖拽
Jul 20 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
Vue实现动态显示textarea剩余字数
May 22 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
Python的类实例属性访问规则探讨
2015/01/30 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
德国网上花店:Valentins
2018/08/15 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
实习感想范文
2015/08/10 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
python执行js代码的方法
2021/05/13 Python
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android