Vue+Node(express)+ ElementUI实现各种功能(二)

接着我的上一篇继续写，今天实现上传图片到数据库以及存储到本地文件

一.在admin文件夹中操作

我们还是通过element-ui自带的组件来上传我们的图片

<el-upload
class="avatar-uploader"
:action="$http.defaults.baseURL +'/upload'"
:show-file-list="false"
:on-success="afterUpload"
>
<img v-if="model.icon" :src="model.icon" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

建立一个http.js文件

import axios from "axios";
import Vue from 'vue'
const http = axios.create({
  baseURL: "http://localhost:3000/admin/api"
});
export default http;

在main.js中

import http from "./http";
Vue.prototype.$http = http; //这样就能全局使用http

二.在serve文件夹中操作

在routes文件下的admin中的index.js

  //上传图片接口
const multer = require('multer') //multer实现单图、多图上传
const upload = multer({dest:__dirname+'/../../uploads'}) //上传到本地文件的路径
app.post('/admin/api/upload',upload.single('file'),async(req,res)=>{
const file = req.file
file.url =`http://localhost:3000/uploads/${file.filename}`
res.send(file)
})

在主index.js里面

app.use('/uploads',express.static(__dirname+'/uploads')) //静态资源路径

完事，下一篇写后台管理系统的登录页面，token验证外加前端路由前置钩子验证