vue中element 上传功能的实现思路


Posted in Javascript onJuly 06, 2018

element 的上传功能

最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传 upload

看完文档后,感觉有两种思路可以实现

before-upload
auto-upload, on-change

before-upload

初始代码

// template
<el-upload 
 class="avatar-uploader" 
 action="https://jsonplaceholder.typicode.com/posts/" 
 :show-file-list="false" 
 :on-success="handleAvatarSuccess" 
 :before-upload="beforeAvatarUpload">
 <img v-if="imageUrl" :src="imageUrl" class="avatar">
 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
// javscript
data() {
 return {
  imageUrl: ""
 };
 },
 methods: {
 handleAvatarSuccess(res, file) {
  this.imageUrl = URL.createObjectURL(file.raw);
 },
 beforeAvatarUpload(file) {
  // 文件类型进行判断 
  const isJPG = file.type === "image/jpeg";
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG) {
  this.$message.error("上传头像图片只能是 JPG 格式!");
  }
  if (!isLt2M) {
  this.$message.error("上传头像图片大小不能超过 2MB!");
  }
  return isJPG && isLt2M;
 }
 }

初始效果图

vue中element 上传功能的实现思路 

考虑在before-upload中进行弹窗后, return false | reject() 即可

修改代码

由于 this.$confirm 是异步操作,因而需要等待其结果才能进行下一步操作

async beforeAvatarUpload(file) {
  const isSubmit = await this.$confirm('此操作将上传文件, 是否继续?', '提示', {
   confirmButtonText: '确定',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   return true
  }).catch(() => { 
   return false  
  });
  console.log(isSubmit)
  return isSubmit;
 }

确认提交和取消提交 ==> 结果却一样

确认提交

vue中element 上传功能的实现思路 

取消提交

vue中element 上传功能的实现思路 

结果却不可以,因而考虑另一种思路了, before-upload 只是进行判断文件是否适合,从而是否上否上传到服务器,而不是用来等待用户进行操作使用的

手动上传

auto-upload
on-change
// template
<el-upload 
 ref="upload"
 class="upload-demo" 
 action="https://jsonplaceholder.typicode.com/posts/" 
 :on-preview="handlePreview" 
 :limit="1" 
 :auto-upload="false"
 :on-change="handleChange"
 :show-file-list="true" 
 :file-list="fileList"
 :on-error="handleError"
 :on-success="handleSuccess">
 <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
// js
data() {
return {
 fileList: [
 ],
 bool: true
 }
},
methods: {
 handleRemove(file, fileList) {
 console.log(file, fileList);
 },
 handlePreview(file) {
 console.log(file);
 },
 handleError(err, file) {
  alert('失败')
  this.fileList = []
 },
 handleSuccess(res, file) {
 alert('成功')
 this.fileList = []
 },
 handleExceed(files, fileList) {},
 async handleChange() {
 const isSubmit = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
 }).then(() => {
  return false
 }).catch(() => { 
  return true  
 });
 if (isSubmit) {
  this.$refs.upload.submit() 
 } else {
  this.fileList = []
 }
 } 
}

确认提交

vue中element 上传功能的实现思路 

取消提交

vue中element 上传功能的实现思路 

此方法可行,现在就是控制因为文件状态改变而导致两次弹窗, 修改如下

文件状态变更 不是成功就是失败,因而在成功失败的函数进行控制即可

添加flag标识进行控制弹窗即可

data() {
 return {
 isConfirm: true
 }
}
async handleChange() {
 if (!this.isConfirm) {
 this.isConfirm = true
 return
 }
 const bo = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
 confirmButtonText: '确定',
 cancelButtonText: '取消',
 type: 'warning'
 }).then(() => {
 return false
 }).catch(() => { 
 return true  
 })
 if (bo) {
 this.$refs.upload.submit()
 this.isConfirm = false
 } else {
 this.fileList = []
 }
}

修改后便可以了,只是注意 在 on-error 和 on-succes 中注意清空 fileList = [] ,这样还可以重新添加文件

确定上传

vue中element 上传功能的实现思路 

取消上传

vue中element 上传功能的实现思路 

总结

以上所述是小编给大家介绍的vue中element 的上传功能的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
jQuery功能函数详解
Feb 01 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 #Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 #Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 #Javascript
用Node提供静态文件服务的方法
Jul 06 #Javascript
vue使用监听实现全选反选功能
Jul 06 #Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 #Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 #Javascript
You might like
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
JS实现页面打印功能
2017/03/16 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
JS获取当前地理位置的方法
2017/10/25 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
Django异步任务线程池实现原理
2019/12/17 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
建龙钢铁面试总结
2014/04/15 面试题
财务管理职业生涯规划书
2014/02/26 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
商场广播稿范文
2015/08/19 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers
windows系统安装配置nginx环境
2022/06/28 Servers
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android