koa踩坑路之–koa的POST请求无法接收数据，upload时候无法接收formdata数据，使用koa-body，完成图片上传

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

学习图片上传和保存的过程中，发现post过来的FormData数据无法获取，经过漫长的踩坑过程，实现FormData上传图片，学习文档，仅限于共同进步，大神请绕行。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、koa-body

使用koa-body解析post数据，实现FormData上传图片

二、使用步骤

1.vue中HelloWorld.vue

vue代码如下（示例）：

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <el-upload class="avatar-uploader" action="''" :http-request="uploadHeadImg" :show-file-list="false" :before-upload="beforeAvatarUpload">
      <img v-if="imgUrl" :src="imgUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import {  uploadHeadImg } from "@/axios/index";
export default {
  name: "HelloWorld",
  data() {
    return {
      imgUrl: null,
      msg: "活在当下!",
    };
  },
  methods: {
    beforeAvatarUpload(file) {
      const isImage = file.type === "image/jpeg" || "image/png";
      const limitSize = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error("上传头像图片只能是 JPG或png 格式!");
      }
      if (!limitSize) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isImage && limitSize;
    },
    uploadHeadImg(item) {
      let formData = new FormData();
      formData.append("file", item.file);
      uploadHeadImg(formData).then(res=>{
        this.imgUrl = res.data.headImg;
      });
    },
  },
};
</script>
<style scoped>
</style>

2.vue中axios.js

代码如下（示例）：

import axios from 'axios';
import { Loading, Message } from 'element-ui';

let urlData = { basicUrl: "http://127.0.0.1:3002" }

let loading;

const instance = axios.create({
  baseURL: urlData.basicUrl,
  timeout: 1000,
  headers: { "X-Requested-With": "XMLHttpRequest" },
  withCredentials: false,
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  loading = Loading.service({
    lock: true, // 是否锁屏
    text: '正在加载...', // 加载动画的文字
    spinner: 'el-icon-loading', // 引入的loading图标
    background: 'rgba(0, 0, 0, 0.3)', // 背景颜色
  })
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  loading.close();
  // 对响应数据做点什么
  return response.data;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

//GET
export function getUserInfoById(id) {
    let params={ id }
  return instance.get('/getUserInfo', { params });
}

//POST
export async function uploadHeadImg(data) {
  return instance.post('/uploadImg', data);
}
export function setUserName(data) {
  return instance.post('/setUserName', data);
}
export default instance;

3.koa中routes.js

代码如下（示例）：

import Router from 'koa-router';
const router = new Router();
const uploadImg = async (ctx)=>{
    let headImg = 'http://'+ctx.request.header.host+'/uploads/'+ctx.request.files.file.path.split("\\uploads\\")[1];
    ctx.body = {
        code:200,
        data:{headImg},
        msg:'上传成功'
    };
}
router.post('/uploadImg',uploadImg);

export default router;

3.koa中app.js

代码如下（示例）：

import koa from 'koa';
import cors  from 'koa-cors';
import router from './routes/routes.js';
import staticFiles from 'koa-static';
import koaBody from 'koa-body';

import path from 'path';

const __dirname = path.resolve();
const app = new koa();

app.use(cors({ // 指定一个或多个可以跨域的域名
    origin: function (ctx) { return '*'; },
    maxAge: 5, // 指定本次预检请求的有效期，单位为秒。
    credentials: true,  // 是否允许发送Cookie
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],  // 设置所允许的HTTP请求方法
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],  // 设置服务器支持的所有头信息字段
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] // 设置获取其他自定义字段
}))

app.use(koaBody({ 
    multipart: true,
    formidable: {
		uploadDir:  path.join(__dirname, `/public/uploads/`),  //上传文件存储目录
		keepExtensions: true,  //允许保留后缀名
		multipart: true,
	}
})); //解析formdata过来的数据
app.use(router.routes());
app.use(router.allowedMethods());
app.use(staticFiles(__dirname + '/public'));

app.listen('3002');
```。

---

# 总结
踩坑路漫漫长@~@