本文實例為大家分享了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(’服務器繁忙，請稍后重試！’); }) },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。