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 } = thisvar 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/' + filenameparams.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 } = thisvar result = app.mysql.select('articles')console.log(result)return result}//传输数据async publish(params) {console.log(params)const { app } = thistry {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组件的局部引用 要记得配置路由

add.vue文件

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！