本文实例为大家分享了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:'服务器繁忙！'
})
}
});
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:'服务器繁忙！'
})
}
});*前端*









添加文件





{{ file.name }}





:text-inside="true"

:stroke-width="20"

:percentage="percentage"

>













添加文件





{{ file.name }}





:text-inside="true"

:stroke-width="20"

:percentage="percentage"

>



*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('服务器繁忙，请稍后重试！');

})

},
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('服务器繁忙，请稍后重试！');

})

},以上就是本文的全部内容，希望对大家的学习有所帮助。