node+vue实现文件上传功能

2023-07-24 01:29:05 76

constexpress=require('express'); constRouter=express.Router(); constmulter=require('multer'); constfs=require('fs'); constpathLib=require('path'); constvideoModel=require('../../models/my_yx_app/video'); //设置视频文件存放位置 constuploadVido=multer({ dest:'uploads_yx_app/video/' }); //上传视频 Router.post('/uploadVideo',uploadVido.single('file'),(req,res)=>{ if(req.file){ letfile=req.file; letnewName=file.path+pathLib.parse(file.originalname).ext;//修改path fs.rename(file.path,newName,(err)=>{//修改path if(err){ returnres.status(200).json({ code:0, msg:'服务器繁忙！' }) }else{ returnres.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{ returnres.status(200).json({ code:0, msg:'服务器繁忙！' }) } });

saveData(){//上传 letthat=this; letfd=newFormData(); 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('服务器繁忙，请稍后重试！'); }) },

node+vue实现文件上传功能

热门推荐

随机推荐