1.添加图片上传接口添加一个新的文件夹，server/static/articles/专门用来存放文章图片。然后在server/app.js中，修改静态文件地址/*app.js*/...app.use(express.static(path.join(__dirname,'./static')))...new添加server/routes/upload.js,/*upload.js*/constexpress=require('express')const{saveFile}=require('../utils/file')constmulter=require('multer')constpath=require('path')letuploadRouter=express.Router()letupload=multer({dest:path.join(__dirname,'../uploads/')})//网页端图片上传示例/**如果需要对用户进行认证，只需添加authUse。前端还应该记住在标头中包含令牌*/uploadRouter.post('/articles',upload.single('file'),asyncfunction(req,res,next){const{file}=reqletbaseUrl=saveFile(file,'/articles')res.json({path:baseUrl,url:process.env.STATIC_URL+baseUrl})})module.exports=uploadRouter上传的图片会保存在static/articles目录下在server/app.js中，也引入这两个/*app.js*/...varuploadRouter=require('./routes/upload');...app.use('/upload',uploadRouter);创建server/utils/file.js文件夹，用于上传图片时的处理/*file.js*/constfs=require('fs')constpath=require('path')//文件保存、删除等操作//file是multer包处理的文件。constsaveFile=(file,localPath,fileName)=>{letdata=fs.readFileSync(file.path)letextname=file.originalname.substring(file.originalname.lastIndexOf('.')+1)letsavename=fileName？(fileName+'.'+extname):file.originalnamefs.writeFileSync(path.join(__dirname,'../static'+localPath+'/'+savename),data)fs.unlinkSync(path.join(__dirname,'../uploads/'+file.filename))letbaseUrl=localPath+'/'+savenamereturnbaseUrl}//删除文件constdeleteFile=(pathUrl)=>{if(!fs.existsSync(path.join(__dirname,'../static'+pathUrl))){returntrue}fs.unlinkSync(path.join(__dirname,'../static'+pathUrl))returntrue}module.exports={saveFile,deleteFile}在server/.env中添加静态文件地址。添加后代码如下#jwtkey,任意字符串JWT_TOKEN_SECRET=ZM_j3@faF93Mdaie2f#jwt生成的token的过期时间，单位秒JWT_TOKEN_EXPIRATION_TIME=3600#微信小程序appidWECHAT_MINI_APP_ID=wx1f196182a0f906e7#微信_MINETCRETWECHATSERICT=74d89**********e1e47c9f66aaeab#mysql数据库配置MYSQL_HOST=localhostMYSQL_USER=rootMYSQL_PASSWORD=12345678MYSQL_DATABASE=biduMYSQL_PORT=3306MYSQL_CHARSET=utf8mb4_unicode_ci#静态文件地址STATIC_URL=http://localhost:30002。小程序添加文章页的详细代码，可以查看github源码，在小程序端添加一个页面home/add用于编辑文章，并在首页添加导航。富文本编辑是微信富文本组件。在预览示例中，需要注意的是图片上传界面如下：3、添加文章，添加界面首页。我们要新建一个文章表，字段status默认值为2。如图：另外，文章的详细信息存储在mongodb中。因此，我们需要添加.env的内容，添加：Nousernameandpassword，可以留空...#mongodb数据库配置MONGODB_HOST=localhostMONGODB_USER=rootMONGODB_PASSWORD=123456MONGODB_DATABASE=biduMONGODB_PORT=27017创建server/routes/articles。js，方法和之前一样，然后，新文章的界面如下：//添加文章Router.post('/add',authUse,async(req,res,next)=>{const{user,body}=reqconst{title,cover_url,html}=bodyletnowTime=getTime('date_time')//将基础数据存入mysqllettempAid=(awaitmysql.set('articles',{title:title,cover_url:cover_url,uid:user.id,created_at:nowTime})).data.insertId//将文章内容保存到mongodb中awaitmongodb.set('articles',{title:title,html:html,article_sql_id:tempAid,cover_url:cover_url,nickname:user.nickname,avatar_url:user.avatar,created_at:nowTime,status:2,})res.json({status:2,message:'success'})})可以看到，在这上面的代码，有一个authUse中间件，这个是之前在server/utils/jwt.js里面写的。通过请求头中的授权信息、token、用户是否登录来判断，如果登录了并且没有过期，可以通过.id的id详情获取用户。因为在中间件authUse中，我们将user赋给了req，所以中间执行后的代码可以很方便的从req中获取到用户信息。即const{user}=req.在小程序/pages/home/add/add.js中，请求接口如下：如果要验证用户身份，必须带上token。每个接口我都是单独写的，但是可以自己打包成一个统一的request。/*add.js*/addOne(){let{title,coverPath,html}=this.dataconsole.log('title,c,f',title,coverPath,html)wx.request({url:app.config.api+'/articles/add',method:'POST',header:{'Authorization':`Bearer${wx.getStorageSync('TOKEN')}`},数据：{title:title,cover_url:coverPath,html:html},success:({data})=>{console.log('dddddddd',data)}})}这里只是添加新的函数。演示地址
