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利用ajax调用后台方法实例
Aug 23 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
js重写方法的简单实现
Jul 10 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
python实现图片彩色转化为素描
2019/01/15 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
销售心得体会
2014/01/02 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
2015年试用期工作总结
2014/12/12 职场文书
毕业酒会致辞
2015/07/29 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫