详解node+vue如何实现文件上传功能

小编这次要给大家分享的是详解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如何实现文件上传功能的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。

分享文章：详解node+vue如何实现文件上传功能
新闻来源：http://dzwzjz.com/article/jdssco.html

大橙子网站建设，新征程启航

详解node+vue如何实现文件上传功能

其他资讯