node+vue实现文件上传功能

本文实例为大家分享了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 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 v-show='percentageShow'> <el-progress :text-inside='true' :stroke- :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(’服务器繁忙，请稍后重试！’); }) },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。