vue+iview实现文件上传


Posted in Vue.js onNovember 17, 2020

vue+iview文件上传(base64编码、类型验证、大小限制、多文件上传及文件预览)

​ iview对文件上传提供了一个专门的标签Upload,不过这个标签默认需要一个接口action属性,但一般我们向后台上传文件并不会选择文件直接就上传了 而是需要和其他的值一起发送请求给后台,并且文件都是转成base64编码。

iview提供了一个方法阻止默认上传:before-upload这个方法是在上传文件之前做的一些操作,当这个方法返回false表示手动上传,不会通过action属性来提交文件

base64、类型验证、大小限制:

<Upload
 :before-upload="before"
 action="">
 <Button icon="ios-cloud-upload-outline">文件上传</Button>
 </Upload>
 <div v-if="file!==null">{{file.name}}</div>
<script>
 export default{
 data(){
 return{
 file:null
 }
 }
 methods:{
 before(file) {//上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传
 this.file = file
 const FileExt = this.file.name.replace(/.+\./, "");//取得文件的后缀名
 if (file.size > 2097152) {//限制文件的大小
  this.$Message.error(file.name + '大小超过2M!')
  this.file = null //超过大小将文件清空
 } else if (['mp3'].indexOf(FileExt.toLowerCase()) === -1) { //判断文件是否是mp3格式
  this.$Message.error('请上传以mp3结尾的文件');
  this.file=null
 }else{
  const reader = new FileReader() //读取文件的字符流
  reader.readAsDataURL(file)//将文件读取为 DataURL 以data:开头的字符串
  reader.onload = e => {
  // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
  const code = e.target.result;
  this.algorithmData.videoFiles = code
  }
 }
 return false
 },
 /*上面判断文件格式的方式有很多 file对象中包含了文件的type属性 可打印file看看有哪些文件属性
 对于一般文件的格式type都能显示 但是对于ini这些类型的配置文件是无法给出你类型的
 如果后台明确指出具体的后缀名 用这个比较粗暴
 if(!/image\/\w+/.test(file.type)) 图片验证 只要是图片类型都允许,就不需要通过后缀名判断
 */
 }
 }
</script>

注意:当你的before-upload返回false后。upload的其他方法是不会触发的,比如文件格式验证和文件大小限制的这个钩子是发生在before-upload之后的均不会触发

Upload标签提供一个multiple属性允许上传多个文件

多文件上传、图片预览:

vue+iview实现文件上传

<div class="demo-upload-list" v-for="fileSrc in srcList">
 <img :src="fileSrc" alt=""><!-- 图片预览部分-->
</div>
<Tooltip content="文件格式为jpg、jpeg、png" placement="right">
 <Upload
 :before-upload="handleBeforeUpload"
 multiple
 type="drag"
 action=""
 style="display: inline-block;width:58px;">
 <div style="width: 58px;height:58px;line-height: 58px;">
 <Icon type="ios-camera" size="20"></Icon>
 </div>
 </Upload>
</Tooltip>

<script>
 export default{
 data(){
 return{
 uploadList:[],
 srcList = []
 }
 }
 methods:{
 handleBeforeUpload(file) {
 /*const FileExt = file.name.replace(/.+\./, "");*/
 if(this.uploadList.length<3) {
  if (file.size > 2097152) {
  this.$Message.error(file.name + '大小超过2M!')
  this.file = null
  } else if (!/image\/\w+/.test(file.type)) {
  this.$Message.error('请上传以jpg、jpeg、png等结尾的图片文件');//FileExt.toLowerCase()
  this.file = null
  }
  this.base64(file)
  this.uploadList.push(file)
 }
 else{
  this.$Message.warning('只能上传3张图片!')
 }
 return false;
 },
 base64(file) {
 let reader = new FileReader()
 reader.onload = (e) => {
  this.srcList.push(e.target.result)//将base64编码存储到路径数组中
 }
 reader.readAsDataURL(file)
 },
 }
 }
</script>

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

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

Vue.js 相关文章推荐
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
Vue如何清空对象
Mar 03 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
vue+iview实现分页及查询功能
Nov 17 #Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 #Vue.js
vue+iview分页组件的封装
Nov 17 #Vue.js
在vue中通过render函数给子组件设置ref操作
Nov 17 #Vue.js
vue+vant实现购物车全选和反选功能
Nov 17 #Vue.js
vue使用vant中的checkbox实现全选功能
Nov 17 #Vue.js
You might like
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
JS 自动安装exe程序
2008/11/30 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
python获取本机外网ip的方法
2015/04/15 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Python中如何获取类属性的列表
2016/12/26 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
python GUI模拟实现计算器
2020/06/22 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
创先争优承诺书
2015/01/20 职场文书
年度考核表个人总结
2015/03/06 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL