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 相关文章推荐
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
Angular2自定义分页组件
Apr 19 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
3种vue组件的书写形式
Nov 29 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通过COM使用ADODB的简单例子
2006/12/31 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
js DOM模型操作
2009/12/28 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
微信小程序canvas动态时钟
2020/10/22 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
python实现单向链表详解
2018/02/08 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python logging模块的使用总结
2019/07/09 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
一文读懂Python 枚举
2020/08/25 Python
3的组成教学反思
2014/04/30 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技