koa踩坑路之--图片上传elementUI中el-upload组件action方式上传

提示：elementUI中el-upload组件action方式上传

---

前言

学习多种方式上传图片—学习文档，大神绕行

一、formData上传图片

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

1.vue中HelloWorld.vue

代码如下（示例）：

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <el-upload class="avatar-uploader" action="http://127.0.0.1:3002/uploadAction"  :on-success="uploadSuccess" :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 { uploadImg } 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;
    },
    uploadSuccess(res) {
      this.imgUrl = res.data.url;
    },
  },
};
</script>

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);
});

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

export default instance;

3.koa中routes.js

代码如下（示例）：

import Router from 'koa-router';

const router = new Router();

//vue el-upload action地址方式
const uploadAction = async ctx => {
    let url = 'http://'+ctx.request.header.host+'/uploads/'+ctx.request.files.file.path.split("\\uploads\\")[1];
    ctx.body = {
        code: 200,
        data: {url},
        msg: "",
    }
}

router.post('/uploadAction',uploadAction);

export default router;

4.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) { // 设置允许来自指定域名请求
        if (ctx.url === '/') {
            return "*"; // 允许来自所有域名请求, 这个不管用
        }
        // return 'http://localhost:8000'; // 这样就能只允许 http://localhost:8000 这个域名的请求了
        return '*'; // 这样就能只允许 http://localhost:8000 这个域名的请求了
    },
    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,
	},
    jsonLimit:'10mb',
    formLimit:'10mb',
    textLimit:'10mb'
})); //解析formdata过来的数据
app.use(router.routes());
app.use(router.allowedMethods());
app.use(staticFiles(__dirname + '/public'));

app.listen('3002');
console.log("项目启动,访问：","localhost:3002");

---

总结

踩坑路漫漫长@~@