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 相关文章推荐
快速排序 php与javascript的不同之处
Feb 22 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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抽象类用法实例分析
2015/07/07 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python迭代用法实例教程
2014/09/08 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
英国网上电器商店:Electricshop
2020/03/15 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
应届大学生求职信
2013/12/01 职场文书
清明节演讲稿
2014/05/27 职场文书
启动仪式策划方案
2014/06/14 职场文书
股权转让协议范本
2014/12/07 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers