十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
小编这次要给大家分享的是详解node+vue如何实现文件上传功能,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比玉泉网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式玉泉网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖玉泉地区。费用合理售后完善,十载实体公司更值得信赖。
*后端*
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 }}
*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('服务器繁忙,请稍后重试!'); }) },
看完这篇关于详解node+vue如何实现文件上传功能的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。