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 常见开发使用技巧总结
Dec 26 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
微信小程序实现签字功能
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
关于svn冲突的解决方法
2013/06/21 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
python插入排序算法实例分析
2015/07/03 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
Django实现文件上传下载
2019/10/06 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
廉政教育心得体会
2014/01/01 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
冰峪沟导游词
2015/02/09 职场文书
情人节单身感言
2015/08/03 职场文书
三好学生竞选稿
2015/11/21 职场文书