在自己做一個簡單的后臺管理系統時，用的是node作本地數據庫，然后用了Element-ui的upload組件來實現圖片的上傳，中間有遇到那么點小坑，這里記錄下，比較坑的一點就是，不知道文件的命名不能帶空格，然后改了好久
1.index.vue文件
這里的話，就是簡單點的使用圖形界面框架Element-ui的上傳組件，然后，action就是服務器端的地址，我這里使用了代理，將localhost:8080代理到你使用node作為服務器的地址就可以了
<template>
<div class="avatar">
<img
:src="avatar?avatar:defaultImg"
/>
</div>
<el-upload
class="upload-demo"
drag
action="http://localhost:8080/api/upload"
:show-file-list="false"
:on-success="uploadImgSuccess"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
</el-upload>
</template>
<script>
import defaultImg from '@/assets/img/avatar.png'
export default{
data() {
return {
avatar: ''
}
},
methods: {
uploadImgSuccess(res) {
this.avatar = res.result.url;
}
}
}
</script>
2.代理文件
我這里使用的是vue-cli3腳手架來搭建的項目，所以，自己在項目的根目錄下創建一個vue.config.js來做一些配置
module.exports = {
devServer: {
port: 8080,
headers: {
},
inline: true,
overlay: true,
stats: 'errors-only',
proxy: {
'/api': {
target: 'http://127.0.0.1:3000',
changeOrigin: true // 是否跨域
}
}
},
};
3.node服務器端文件
這里很重要的一點就是設置靜態資源目錄
app.use('/serverImage', express.static(path.join(__dirname, 'serverImage')));
對圖片上傳進行了方法的封裝
const fs = require('fs');
const path = require('path');
/* formidable用于解析表單數據，特別是文件上傳 */
const formidable = require('formidable');
/* 用于時間格式化 */
const formatTime = require('silly-datetime');
/* 圖片上傳 */
module.exports = (req, res) => {
/* 創建上傳表單 */
let form = new formidable.IncomingForm();
/* 設置編碼格式 */
form.encoding = 'utf-8';
/* 設置上傳目錄(這個目錄必須先創建好) */
form.uploadDir = path.join(__dirname, '../serverImage');
/* 保留文件后綴名 */
form.keepExtensions = true;
/* 設置文件大小 */
form.maxFieldsSize = 2 * 1024 *1024;
/* 格式化form數據 */
form.parse(req, (err, fields, files) => {
let file = files.file;
/* 如果出錯，則攔截 */
if(err) {
return res.send({'status': 500, msg: '服務器內部錯誤', result: ''});
}
if(file.size > form.maxFieldsSize) {
fs.unlink(file.path);
return res.send({'status': -1, 'msg': '圖片不能超過2M', result: ''});
}
/* 存儲后綴名 */
let extName = '';
switch (file.type) {
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
case 'image/jpg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
}
if(extName.length == 0) {
return res.send({'status': -1, 'msg': '只支持jpg和png格式圖片', result: ''});
}
/* 拼接新的文件名 */
let time = formatTime.format(new Date(), 'YYYYMMDDHHmmss');
let num = Math.floor(Math.random() * 8999 + 10000);
let imageName = `${time}_${num}.${extName}`;
let newPath = form.uploadDir + '/' + imageName;
/* 更改名字和路徑 */
fs.rename(file.path, newPath, (err) => {
if(err) {
return res.send({'status': -1, 'msg': '圖片上傳失敗', result: ''});
} else {
return res.send({'status': 200, 'msg': '圖片上傳成功', result: {url: `http://localhost:3000/serverImage/${imageName}`}});
}
})
})
};
方法的調用
const express = require('express');
const router = express.Router();
const uploadImg = require('./uploadImg');
/* 上傳圖片 */
router.post('/upload', (req, res) => {
uploadImg(req, res);
});
module.exports = router;
服務器端入口文件
const express = require('express');
const app = express();
const path = require('path');
/* body-parser是一個HTTP請求體解析的中間件
* 使用這個模塊可以解析JSON、Raw、文本、URL-encoded格式的請求體
* */
const bodyParser = require("body-parser");
const dataBaseOperate = require('./database/operate');
/* 以application/json格式解析數據 */
app.use(bodyParser.json());
/* 以application/x-www-form-urlencoded格式解析數據 */
app.use(bodyParser.urlencoded({ extended: false }));
/* 設置靜態資源目錄 */
app.use('/serverImage', express.static(path.join(__dirname, 'serverImage')));
app.use('/api', dataBaseOperate);
app.listen(3000, () => {
console.log('server is listening to http://localhost:3000')
});
4.小結
對于接口文件的返回，這里使用了body-parser這個中間件來對node返回的body進行json格式的解析
很重要的一點就是設置靜態資源目錄，不然的話就會報錯，找不到文件或者文件夾
設置靜態資源目錄，用于存儲服務器端的靜態資源文件
app.use('/serverImage', express.static(path.join(__dirname, 'serverImage')));
然后就是對文件的命名不能出現空格
文件的鏈接可以使用本地服務器端的url地址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
