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的执行顺序 之实战篇
Mar 03 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
JS运算符简单用法示例
Jan 19 Javascript
原生js实现放大镜组件
Jan 22 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
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强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
微信小程序日历效果
2018/12/29 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
AI人工智能 Python实现人机对话
2017/11/13 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
自荐信如何制作?
2014/02/21 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
财务管理专业自荐书
2014/09/02 职场文书
中秋节主题班会
2015/08/14 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript