koa实现简单图片上传

Posted 2023-04-08

参考技术A

文件上传请求肯定是post请求，koa中处理post请求参数需要安装一个中间件

我们处理文件上传需要在 koaBody 的配置设置 multipart 为 true ，这样上传的文件也就是 formdata ，会被 koaBody 处理在 ctx.request.files 中，其他普通的参数通过 ctx.request.body 就可以拿到:

上传的文件会包含上面那个几个字段，其中 path 为临时路径，把他们返回，下面会把接口请求结果贴出来，看一下就知道各个字段的含义。

app中引入并使用：

引入 upload 路由:

这里用了原生的ajax，返回的response是个json字符串

安装: npm install fs-extra --save

改一下我们的 upload 接口，upload.js:

然后我们重新上传一下文件

其实上面已经实现了图片上传并且保存到我们想要的位置，那怎么访问呢，前端怎么展示呢，这就需要处理静态资源了。

在app.js中:

这时候我们就可以直接通过图片的文件名访问图片了，我们上面上传的一张图片叫 girl.jpg ，这时候直接访问:

前端加个img标签展示图片:

前端上传后:

如果需要添加其他参数，就在 formdata 中再 append 其他参数

这时候把ctx.request.body返回给前端，看看是什么样的：

到这里整个功能就实现了，欢迎大家指教哦。

使用koa+mongodb构建的仿知乎接口

1. 实现图片上传接口

需求：知乎中用户编辑资料的图片上传

分析：通过把图片上传到服务器中,再返回url

1. 因为要识别file类型的参数，所以需要使用koa-body，koa-bodyparser无法识别。

const KoaBody = require('koa-body')
app.use(KoaBody({
  multipart: true,
  formidable: {
    // 设置上传地址
    uploadDir: path.join(__dirname, '/public/uploads'),
    // 保留图片后缀
    keepExtensions: true
  }
}))

1. 要把url返回，需要使用koa-static管理静态资源

const KoaStatic = require('koa-static')
app.use(KoaStatic(
  path.join(__dirname, staticPath)
))

1. 注册上传图片路由

router.post('/upload', upload)

1. 实现上传的控制器函数

// home.js
upload (ctx) {
  const file = ctx.request.files.file
  const basename = path.basename(file.path)
  ctx.body = {
    url: `${ctx.origin}/uploads/${basename}`
  }
}

1. 使用Postman测试

2. 实现用户资料编辑接口

需求：如图所示，实现编辑用户资料的接口

1. 重新设计用户的Schema，较之前，增加一些字段

const UserSchema = new Schema({
  ...
  avatar_url: {type: String},
  gender: {type: String, enum: ['male', 'female'], default: 'male'},
  headline: {type: String},
  locations: {type: [{type: String}], select: false},
  business: {type: String, select: false},
  employments: {
    type: [{
      company: {type: String},
      job: {type: String},
    }],
    select: false
  },
  educations: {
    type: [{
      school: {type: String},
      major: {type: String},
      diploma: {type: Number, enum: [1, 2, 3, 4, 5]},
      enterance_year: {type: Number},
      graduation_year: {type: Number}
    }],
    select: false
  },
  following: {
    type: [{type: Schema.Types.ObjectId, ref: 'User'}],
    select: false
  }
})

1. 修改users控制器中的update方法

async update(ctx) {
  ctx.verifyParams({
    name: {type: 'string', required: false},
    password: {type: 'string', required: false},
    avatar_url: {type: 'string', required: false},
    gender: {type: 'string', required: false},
    headline: {type: 'string', required: false},
    locations: {type: 'array', itemType: 'string', required: false},
    business: {type: 'string', required: false},
    employments: {type: 'array', itemType: 'object', required: false},
    educations: {type: 'array', itemType: 'object', required: false},
  })
  const user = await User.findByIdAndUpdate(ctx.params.id, ctx.request.body)
  if (!user) {ctx.throw(404, '用户不存在')}
  ctx.body = user
}

1. 修改users控制器中的findById方法,实现过滤字段

async findById(ctx) {
  const {fields} = ctx.query
  const selectFields = fields.split(';').filter(f => f).map(f => ' +' + f).join('')
  const user = await User.findById(ctx.params.id).select(selectFields)
  if (!user) {ctx.throw(404, '用户不存在')}
  ctx.body = user
}

1. 使用Postman测试

总结:

1. 写接口的步骤一般是：

• a. 定义数据模型Schema

• b. 编写转发的路由

• c. 使用数据模型编写控制器逻辑

• e. 使用Postman测试

• f. 编写单元测试和压测

2.更新或者删除用户的信息，是需要鉴权的过程的。