溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是詳解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 class="from-contral" >
<!--此處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 class="zt-progress" v-show="percentageShow">
<el-progress
:text-inside="true"
:stroke-width="20"
: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('服務器繁忙，請稍后重試！');
})
},看完這篇關于詳解node+vue如何實現文件上傳功能的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
