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 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
图书管理程序(三)
2006/10/09 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
php 执行系统命令的方法
2009/07/07 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
python实现排序算法
2014/02/14 Python
Python生成随机密码的方法
2017/06/16 Python
python3操作mysql数据库的方法
2017/06/23 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
学生思想表现的评语
2014/01/30 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
请客吃饭开场白
2015/06/01 职场文书
法定代表人身份证明书
2015/06/18 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书