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 相关文章推荐
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
php跨域调用json的例子
Nov 13 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
原生js二级联动效果
Jun 20 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
浅谈node模块与npm包管理工具
Jan 03 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 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
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
php经典趣味算法实例代码
2020/01/21 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
Python之PyUnit单元测试实例
2014/10/11 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
python实现kMeans算法
2017/12/21 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
python 实现任务管理清单案例
2020/04/25 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
Java语言的优势
2015/01/10 面试题
大三毕业自我鉴定
2014/01/15 职场文书
国培计划培训感言
2014/03/11 职场文书
小学生环保倡议书
2014/05/15 职场文书
个人工作总结范文2014
2014/11/07 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
门店店长岗位职责
2015/04/14 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
成绩单家长意见
2015/06/03 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS