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之卸载鼠标事件的代码
May 14 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
AngularJS中的模块详解
Jan 29 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 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 单引号与双引号的区别
2009/11/24 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
Javascript复制实例详解
2016/01/28 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
附答案的Java面试题
2012/11/19 面试题
物理教育专业毕业生推荐信
2013/11/03 职场文书
销售找工作求职信
2013/12/20 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书