vue实现文件上传功能


Posted in Javascript onAugust 13, 2018

vue 文件上传,供大家参考,具体内容如下

首先 先说一下想要实现的效果

vue实现文件上传功能

就如截图所见,需要将企业和需要上传的文件提交到后台处理,那么接下来就说如何实现

vue 实现

vue 页面代码

<el-upload
 class="upload-demo"
 ref="upload"
 action="doUpload"
 :limit="1"
 :file-list="fileList"
 :before-upload="beforeUpload">
 <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
 <a href="./static/moban.xlsx" rel="external nofollow" download="模板"><el-button size="small" type="success">下载模板</el-button></a>
 <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
 <div slot="tip" class="el-upload__tip">只能上传excel文件,且不超过5MB</div>
 <div slot="tip" class="el-upload-list__item-name">{{fileName}}</div>
 </el-upload> 
 <span slot="footer" class="dialog-footer">
 <el-button @click="visible = false">取消</el-button>
 <el-button type="primary" @click="submitUpload()">确定</el-button>
 </span>

上传之前的大小校验

beforeUpload(file){
 debugger
 console.log(file,'文件');
 this.files = file;
 const extension = file.name.split('.')[1] === 'xls'
 const extension2 = file.name.split('.')[1] === 'xlsx'
 const isLt2M = file.size / 1024 / 1024 < 5
 if (!extension && !extension2) {
  this.$message.warning('上传模板只能是 xls、xlsx格式!')
  return
 }
 if (!isLt2M) {
  this.$message.warning('上传模板大小不能超过 5MB!')
  return
 }
 this.fileName = file.name;
 return false // 返回false不会自动上传
 },

手动上传确认提交

submitUpload() {
 debugger
 console.log('上传'+this.files.name)
 if(this.fileName == ""){
  this.$message.warning('请选择要上传的文件!')
  return false
 }
 let fileFormData = new FormData();
 fileFormData.append('file', this.files, this.fileName);//filename是键,file是值,就是要传的文件,test.zip是要传的文件名
 let requestConfig = {
  headers: {
  'Content-Type': 'multipart/form-data'
  },
 }
 this.$http.post(`/basedata/oesmembers/upload?companyId=`+this.company, fileFormData, requestConfig).then((res) => {
  debugger
  if (data && data.code === 0) {
  this.$message({
  message: '操作成功',
  type: 'success',
  duration: 1500,
  onClose: () => {
  this.visible = false
  this.$emit('refreshDataList')
  }
  })
  } else {
  this.$message.error(data.msg)
  }
 }) 
 }

后台

/**
 * 上传文件
 */
 @PostMapping("/upload")
 @RequiresPermissions("basedata:oesmembers:upload")
 public R upload(@RequestParam("file") MultipartFile file, @RequestParam("companyId") Integer companyId) {
 System.out.println(companyId);
 if (file.isEmpty()) {
  throw new RRException("上传文件不能为空");
 }
 //上传文件 相关逻辑

 return R.ok();
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js删除所有的cookie的代码
Nov 25 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
jQuery事件用法详解
Oct 06 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
js实现简单进度条效果
Mar 25 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 #Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 #Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 #Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 #Javascript
Vue实现左右菜单联动实现代码
Aug 12 #Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 #Javascript
vue实现商品加减计算总价的实例代码
Aug 12 #Javascript
You might like
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
php实现httpRequest的方法
2015/03/13 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
python实现ip查询示例
2014/03/26 Python
聊聊Python中的pypy
2018/01/12 Python
浅析Python数据处理
2018/05/02 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
python argparser的具体使用
2019/11/10 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
承办会议欢迎词
2014/01/17 职场文书
会计自我鉴定
2014/02/04 职场文书
英语教育专业自荐信
2014/05/29 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
工作检讨书大全
2015/01/26 职场文书
社区工作者个人总结
2015/02/28 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers