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 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
js的三种继承方式详解
Jan 21 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 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正则
2006/07/07 PHP
PHP 实例化类的一点摘记
2008/03/23 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php验证session无效的解决方法
2014/11/04 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
python常量折叠基础知识点讲解
2021/02/28 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
消防安全汇报材料
2014/02/08 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
团日活动总结书格式
2014/05/08 职场文书
生日庆典策划方案
2014/06/02 职场文书
中学生检讨书范文
2014/11/03 职场文书
前台接待岗位职责
2015/02/03 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
结婚典礼主持词
2015/06/29 职场文书
如何用python插入独创性声明
2021/03/31 Python
Python使用Web框架Flask开发项目
2022/06/01 Python