egg.js开发 文章发布接口(图片上传)(表单数据接口)

后台的代码:

在//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'
  };

• 请求函数: controller

    首先下载安装 mz_modules/pump： 安装命令

cnpm /npm install mz-modules --save
yarn add mz-modules --save

   这里面我们用到了一个插件 数据格式化 ： 安装命令

npm i commit --save

需要在 //app/controller/articles.js 里写接口函数

const Controller = require('egg').Controller  //引入egg的controller
const fs = require('fs') // 引入fs模块，fs是nodejs的文件模块 可以对项目中的文件进行增删改查操作
const path = require('path') // 引入path模块
const pump = require('mz-modules/pump') // 安装并引入 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
    // console.log(params)
    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

• 文章发布service

之后我们在//app/servie/articels里书写传输数据接口函数
// app/service/articles
const 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

• 接口 router

    在//app/router.js 书写接口  

module.exports = app => {
  // console.log(app)
  const { router, controller } = app;
  router.get('/', controller.home.index);
  // 登录页面的路由
  router.post('/login', controller.login.login);
  // 文章列表接口
  router.get('/articles', controller.articles.articles);

  //文章上传接口
  router.post('/articles/publish', controller.articles.publish) 
};

下面是前台的代码

        App.vue文件    为了快速搭建界面 这里用到了vant 组件

//首先我们在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>

add.vue文件

接下来就是在我们的上传界面

<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>