提示：koa踩坑路图片上传之–base64上传图片，base64转buffer生成图片
文章目录
前言一、分片上传图片二、使用步骤1.vue中HelloWorld.vue2.vue中axios.js3.koa中routes.js4.koa中app.js 总结
前言
学习多种方式上传图片—学习文档，大神绕行
一、分片上传图片
示例：这种方式传输的base64字符串比文件还要大,不建议使用，仅供参考
二、使用步骤
1.vue中HelloWorld.vue
代码如下（示例）：
<template><div class="hello"><h1>{{msg}}</h1><el-upload class="avatar-uploader" action="''" :http-request="uploadBase64" :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 {uploadBase64 } 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;},uploadBase64(item) {let sourceId = new Date().getTime() + item.file.name.split(".")[0];//Blob转化为Base64this.getBase64(item.file).then((base64) => {uploadBase64({base64,sourceId }).then((obj) => {if (obj) {this.imgUrl = base64;}});});},getBase64(file) {const fileRender = new FileReader();return new Promise((resolve) => {fileRender.onload = (e) => {resolve(e.target.result);};fileRender.readAsDataURL(file);});},},};</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);});export async function uploadBase64(data) {return instance.post('/uploadBase64', data);}export default instance;
3.koa中routes.js
代码如下（示例）：
import Router from 'koa-router';import fs, {readFileSync } from 'fs';import path, {resolve } from 'path';let dirname = path.resolve();let arr = dirname.split("\\");dirname = arr.join('/');const __dirname = dirname;const router = new Router();const uploadBase64= async ctx=>{const req = ctx.request.body;let base64 = req.base64.replace(/^data:image\/\w+;base64,/, '');let buffer = Buffer.from(base64,"base64");await fs.writeFileSync(`./public/uploads/${req.sourceId}.png`,buffer);ctx.body = {code: 200,data: {url:`${__dirname}/public/uploads/${req.sourceId}.png`},msg: "",}}router.post('/uploadBase64',uploadBase64);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, // 是否允许发送CookieallowMethods: ['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");
总结
踩坑路漫漫长@~@
