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单元格多列合并的实现
Nov 26 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue实现在data里引入相对路径
Jun 05 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中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python内置模块logging用法实例分析
2018/02/12 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
Python jieba库用法及实例解析
2019/11/04 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
解释下面关于J2EE的名词
2013/11/15 面试题
文科生自我鉴定
2014/02/15 职场文书
出国留学经济担保书
2014/04/01 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
MySQL 语句执行顺序举例解析
2022/06/05 MySQL