图片不显示
我采用 vue+elementui+nodejs+mysql ，前台采用了潘家诚的vue-admin-template，后台采用 大事件后台API项目
看结果
看结果
看用户列表manager/index.vue代码
看后台app.js代码
// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()
const joi = require('@hapi/joi')
// 1.2 配置 cors 跨域, 导入 cors 中间件，必须在路由之前
const cors = require('cors')
// 将 cors 注册为全局中间件，这样项目中的接口就支持跨域访问了
app.use(cors())
// 1.3 配置解析表单数据的中间件 这是express 4.16+ 内置的，但这里没用，而是在下面使用了 bodyParser 解析 post 表单数据的中间件
// 内置中间件是基于bodyParser封装而来，两者用法基本一致
// (1) 通过如下的代码，配置解析(只能解析这种) application/x-www-form-urlencoded 格式的表单数据的中间件：
// app.use(express.urlencoded({ extended: false }))
// 1.4 在 app.js 中，所有路由之前，声明一个全局中间件，为 res 对象挂载一个 res.cc() 函数 ：
// 在处理函数中，需要多次调用 res.send() 向客户端响应 处理失败 的结果，为了简化代码，可以手动封装一个 res.cc() 函数
app.use(function(req, res, next) {
// status = 0 为成功； status = 1 为失败； 默认将 status 的值设置为 1，方便处理失败的情况
res.cc = function (err, status=1, code=20000) {
res.send({
status, // 状态
code,
message: err instanceof Error ? err.message : err, // 状态描述，判断 err 是 错误对象 还是 字符串
})
}
next()
})
// 1.5 解析 token 的中间件
const config = require('./config') // 导入配置文件
const expressJWT = require('express-jwt') // 解析 token 的中间件
// 使用 .unless({ path: [/^\/api\//] }) 指定哪些接口不需要进行 Token 的身份认证
app.use(expressJWT({ secret: config.jwtSecretKey }).unless({ path: [/^\/yan\//, /^\/public\//] }))
// 1.6 解析post的两个中间件 【一个星期的错误】为什么一直没能解析提交过来的data，是node服务端,body的中间件你没加上
// 用1.6或1.7都可以
// app.use(express.json())
// 1.7 解析 post 表单数据的中间件
const bodyParser = require('body-parser');
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// 配置解析，用于解析json和urlencoded格式的数据
app.use(bodyParser.json())
// 全局 中间件 解决所有路由的 跨域问题
app.all('*',function (req,res,next) {
res.header("Access-Control-Allow-Origin: *")
res.header("Access-Control-Allow-Headers: Origin,X-Requested-With,Content-Type,Accept,Authorization");
res.header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS,PATCH');
next()
})
//暴漏静态资源文件 暴漏之后我们可以通过域名访问该文件下的资源
app.use(express.static('./public'))
// 1.8 实现图片上传
const multer = require('multer')
const fs = require("fs");
//图片上传
app.post("/public/user/fileUpload",
multer({
//设置文件存储路径
dest: "./public/user/fileUpload",
}).array("file", 1),
function (req, res, next) {
let files = req.files;
let file = files[0];
let fileInfo = {};
// 这里去掉了目录中的public,因为上面指定public
let path = "./public/user/fileUpload/" + Date.now().toString() + "_" + file.originalname;
console.log(path);
fs.renameSync("./public/user/fileUpload/" + file.filename, path);
//获取文件基本信息
fileInfo.type = file.mimetype;
fileInfo.name = file.originalname;
fileInfo.size = file.size;
fileInfo.path = "http://127.0.0.1:3007"+path.replace(/.\/public/, '');
// fileInfo.path = "http://127.0.0.1:9528"+path
res.json({
code: 200,
msg: "OK",
data: fileInfo,
});
}
);
// 2. 导入并使用【管理员】路由模块
const managerRouter = require('./router/manager')
app.use('/yan', managerRouter)
// 3. 导入并使用【个人中心】的用户信息路由模块
const userinfoRouter = require('./router/userinfo')
// 注意：以 /my 开头的接口，都是有权限的接口，需要进行 Token 身份认证
app.use('/my', userinfoRouter)
// 4. 导入并使用【文章分类】 的路由模块
const artCateRouter = require('./router/artcate')
// 为文章分类的路由挂载统一的访问前缀 /my/article
app.use('/my/article', artCateRouter)
// 5. 导入并使用【文章】 的路由模块
const articleRouter = require('./router/article')
app.use('/my/article', articleRouter)
// 6. 导入并使用【用户】 的路由模块
const userRouter = require('./router/user')
app.use('/my/user', userRouter)
// 9. 定义错误级别的中间件
// (1).捕获验证失败的错误，并把验证失败的结果响应给客户端
// (2).捕获并处理 Token 认证失败后的错误
app.use( (err, req, res, next) => {
// 3.1 验证失败导致的错误
if( err instanceof joi.ValidationError ) return res.cc(err)
// 3.2 捕获身份认证失败后的错误
if (err.name === 'UnauthorizedError') return res.cc('身份认证失败2！')
// 3.3 否则就是未知的错误
res.cc(err)
})
// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(3007, function () {
console.log('api server running at http://127.0.0.1:3007')
})
看上传图片，成功了，但也是不显示，还是跨域问题？
出现问题的提示
