本文共 5792 字，大约阅读时间需要 19 分钟。
这里面我们需要插件 这里的内容有与前面的【1、2、3】所相连 部分内容不再解释
$ npm i mz-modules --save会在下面的内容中使用$ npm i commit --save 数据格式化方法并且 为了快速搭建界面 这里用到了vant 组件
首先我们要在//app/config/config.default.js文件里添加crsf 这也是解决post请求时 报403 foibidden的方法//解决跨域 config.security = { //就是这里 csrf: { enable: false, ignoreJSON: true }, domainWhiteList: ['*'], } config.cors = { origin: '*', allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH' };首先我们需要在//app/controller/articles里书写接口函数const Controller = require('egg').Controller;const fs = require('fs') // fs是nodejs的文件模块 可以对项目中的文件进行增删改查操作const path = require('path')const pump = require('mz-modules/pump')class ArticlesController extends Controller {//请求数据的接口函数 async articles() { const { ctx } = this var result = await ctx.service.articles.article() // console.log(result) ctx.body = { code: 1, msg: 'success', data: result } } // 文章发布接口 async publish() { const { ctx } = this const parts = ctx.multipart({ autoFields: true }) // console.log(parts) let stream = await parts() // console.log(stream) // console.log(path.extname(stream.filename)) var params = parts.field if(stream) { // extname可以获取文件的扩展名 let filename = (new Date().getTime() + Math.random().toString(36).substr(2) + path.extname(stream.filename).toLocaleLowerCase()) // console.log(filename) let target = 'app/public/imgs/' + filename params.img = 'http://localhost:7001/public/imgs/' + filename // createWriteStream 穿件一个写文件流的方法 可以将文件写入本地文件中 // createReadStream 读取文件内容的方法 let writeStream = fs.createWriteStream(target) await pump(stream, writeStream); } // console.log(parts.field, parts.fields) let result = await ctx.service.articles.publish(params) // console.log(result) ctx.body = { code: 1, msg: result } }}module.exports = ArticlesController之后我们在//app/servie/articels里书写传输数据接口函数// app/service/articlesconst Service = require('egg').Service;class ArticeService extends Service { //请求数据 async article() { const { app } = this var result = app.mysql.select('articles') console.log(result) return result } //传输数据 async publish(params) { console.log(params) const { app } = this try { var result = app.mysql.insert('articles', params); return '发布成功' } catch(err) { console.log(err) return err } } } module.exports = ArticeService然后在//app/router.js 书写接口module.exports = app => { const { router, controller } = app; router.get('/', controller.home.index); router.get('/login', controller.login.login); router.get('/gengyanfeng', controller.gengyanfeng.qiangpozheng); router.get('/html', controller.html.list); // 文章列表接口 router.get('/articles', controller.articles.articles); //文章上传接口 router.post('/articles/publish', controller.articles.publish) };//首先我们在app.vue中书写了跳转 这里用的是vant组件的局部引用 要记得配置路由<template> <div id="app"> <router-view/> <van-tabbar v-model="active"> <van-tabbar-item icon="home-o">首页</van-tabbar-item> <van-tabbar-item icon="friends-o">标签</van-tabbar-item> </van-tabbar> </div></template><script>import { Tabbar, TabbarItem } from 'vant';export default { name:'app', components:{ [Tabbar.name]:Tabbar, [TabbarItem.name]:TabbarItem }, data(){ return{ active:'home' } }}</script><style>body,html{ height: 100%;}#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; height: 100%;}</style><template> <div id="add_articles"> //上传图片 部分 自带了 一个方法 当图面显示到渲染界面后触发 他有一个value值 里面包含图片的属性 <div class="upload_box"> <van-uploader :show-upload="showUpLoad" v-model="fileList" :after-read="afterRead" /> </div> <div> <!-- 输入任意文本 --> <van-field v-model="articleInfo.title" type="text" label="文章标题" /> <!-- 输入手机号，调起手机号键盘 --> <van-field v-model="articleInfo.summery" type="text" label="文章描述" /> <!-- 允许输入正整数，调起纯数字键盘 --> <van-field v-model="articleInfo.content" type="textarea" label="文章内容" /> </div> //提交按钮 <div style="height:44px"> <van-button class="publish_btn" type="primary" @click="publish">发布</van-button> </div> </div></template><script>import { Uploader, Field, Button } from "vant";import moment from 'moment'export default { name: "add_articles", components: { [Uploader.name]: Uploader, [Field.name]: Field, [Button.name]: Button }, data() { return { showUpLoad: true, fileList: [], //图片的数据集合 articleInfo: { //要上传的数据对象 title: "", summery: "", content: "", createTime: "" }, img: "" //图片信息 }; }, methods: { //上面提交图片自带的方法 afterRead(value) { console.log(value) this.showUpLoad = false; this.img = value.file; }, publish() { let formData = new FormData(); //将时间格式更改为适合上传数据库的格式 this.articleInfo.createTime = moment(new Date()).format( "YYYY-MM-DD HH:mm:ss" ); //下面是将各种数据上传到fromData中 formData.append("title", this.articleInfo.title); formData.append("summery", this.articleInfo.summery); formData.append("content", this.articleInfo.content); formData.append("img", this.img); formData.append("creatTime", this.articleInfo.createTime); //发送数据 this.$http .post("http://localhost:7001/articles/publish", formData) .then(res => { console.log(res); }); } }};</script><style scoped>#add_articles { padding-top: 15px; position: relative; height: 100%;}.upload_box { text-align: center;}.publish_btn { width: 100%; position: relative; bottom: -290px;}</style>转载地址：http://cuij.baihongyu.com/