node+vue实现文件上传功能


Posted in Javascript onMay 28, 2020

本文实例为大家分享了node+vue实现文件上传的具体代码,供大家参考,具体内容如下

*后端*

const express = require('express');
const Router = express.Router();
const multer = require('multer');
const fs = require('fs');
const pathLib = require('path');
const videoModel = require('../../models/my_yx_app/video');


//设置 视频文件存放位置
const uploadVido = multer({
 dest:'uploads_yx_app/video/'
});
//上传视频
Router.post('/uploadVideo',uploadVido.single('file'),(req,res)=>{
 if (req.file) {
 let file = req.file;
 let newName = file.path+pathLib.parse(file.originalname).ext; //修改path
 fs.rename(file.path,newName,(err)=>{ //修改path
  if (err) {
  return res.status(200).json({
   code:0,
   msg:'服务器繁忙!'
  })
  }else {
  return res.status(200).json({
   code:1,
   msg:'上传完成',
   title:pathLib.parse(file.originalname).name,
   videoUrl:'http://127.0.0.1:3001/uploads_yx_app/video/'+file.filename+pathLib.parse(file.originalname).ext
  })
  }
 })
 }else {
 return res.status(200).json({
  code:0,
  msg:'服务器繁忙!'
 })
 }
});

*前端*

<div class="from-contral" style="position: relative">

   <!--此处name 与 uploadVido.single('file') 相同-->
   <input type="file" name="file" @change="changeFile" class="customStyle">
   <el-button size="mini" type="primary">
   添加文件
   <i class="el-icon-upload el-icon--right"></i>
   </el-button>
   <div class="zt-title-video">{{ file.name }}</div>
   <div class="zt-progress" v-show="percentageShow">
   <el-progress
    :text-inside="true"
    :stroke-width="20"
    :percentage="percentage"
   >
  </el-progress>
 </div>
</div>

*js处理逻辑数据*

saveData() { //上传
  let that = this;
  let fd = new FormData();
  fd.append('file', this.file);
  fileUpdata({ //上传文件存储在后端
   method: 'post',
   url: '/uploadVideo',
   data: fd,
   //监听上传时间 //实现进度条
   onUploadProgress(progressEvent) {
   that.percentageShow = true;
   that.percentage = parseInt(((progressEvent.loaded / progressEvent.total) * 100));
   }
  }).then(res => {
   if (res.data.code === 1) {
   //数据持久化
   fileUpdata({
    method: 'post',
    url: '/saveVideoInfo',
    data: {
    videoUrl: res.data.videoUrl, //路径
    videoName: res.data.title, //标题
    videoType:that.videoType, //类型
    userName:localStorage.getItem('username') //那个用户上传的
    }
   }).then(res => {
    if (res.data.code === 1) {
    setTimeout(function () { //为什么延迟,为了使进度条走完
     that.$message({
     message: '上传成功',
     type: 'success'
     })
    }, 1000);
    }
   }).catch(err => {
    this.$message.error('服务器繁忙,请稍后重试!');
   });
   }
  }).catch(err => {
   this.$message.error('服务器繁忙,请稍后重试!');
  })
  },

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

Javascript 相关文章推荐
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
vue中实现图片压缩 file文件的方法
May 28 #Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 #Javascript
Vue实现附件上传功能
May 28 #Javascript
如何使用Javascript中的this关键字
May 28 #Javascript
简单了解JavaScript arguement原理及作用
May 28 #Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 #Javascript
js实现轮播图特效
May 28 #Javascript
You might like
PHP数组操作简单案例分析
2016/10/15 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
ie focus bug 解决方法
2009/09/03 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python常见数据结构详解
2014/07/24 Python
用Python创建声明性迷你语言的教程
2015/04/13 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
使用Python实现分别输出每个数组
2019/12/06 Python
python图形用户接口实例详解
2019/12/16 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
WiFi云数码相框:Nixplay
2018/07/05 全球购物
新年晚会主持词
2014/03/24 职场文书
学习经验交流会主持词
2014/04/01 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
2014年班主任工作总结
2014/11/08 职场文书
办公室文员岗位职责
2015/02/04 职场文书
防汛通知
2015/04/25 职场文书
借条如何写
2015/05/26 职场文书
小学生反邪教心得体会
2016/01/15 职场文书