vue element mysql教程_element-vue-koa2-mysql实现文件上传

友情提示：这篇博客不会详细说明搭建过程

阅读群体建议：第一次使用node或者koa2写文件上传或者下载，因为你不知道用fs的哪个方法，我也是从fs里试水试了一天，各种百度才搞出来的，特别学过java的来看更容易理解！希望可以帮助跟我一样自学的朋友！

错误思路：我最开始想把文件上传到mysql中，字段换成blob就好了，但是我也不知道存没存进去，查出来是二进制也不会转换，搞死了，想着没有Tomcat服务器，怎么存储文件啊，后来发现，我们的项目本身就可以当做服务器，直接把文件存储到src下边就好了呀，没有必要非得存到Tomcat或者mysql里啦，这个错误思路，影响了我大半天，赶紧扭转思路，放下看吧！！！

思路：

保存：

第一步：页面想后台传送文件流

第二步：使用koa-router配合koa-body进行接收

第三步：读取文件流let readStream = fs.createReadStream(file.path) 返回一个reader二进制文件 file为接收前台的文件

第四步：将文件流写入本地，let writeStream = fs.createWriteStream(filePath)

注意：本机路径地址，我放到了koa2工程的/src/uploads/images/里边  所以引入const path = require("path") ,let filePath = path.resolve('src/uploads/images/'),会返回一个绝对路径，把这个绝对路径放到写入流的参数里

第五步：readStream.pipe(writerStream) 这个必须要有，至于为什么，我目前还不清楚

第六步：将这个filePaht绝对路径的地址保存到数据中，为了以后查询使用

查询：

第一步：从数据库中查询到文件的绝对路径 path

第二步：查询该文件的流！使用let readStream = fs.readFileSync(path), 注意：这个方法是同步的，所以没有回调函数，只能定义一个变量接受返回值！最好不要用fs.readFile()这个方法，这个方法是异步的，会很麻烦

第三步：如果是图片,将该文件转换成base64，let base64 = readStream.toString('base64')

简写(第二步也可以简写成 let base64 = fs.readFileSync(path,'base64')

第四步：转换成你想要的base64格式 比如：let base64 = "data:image/png;base64,"  + fs.readFileSync(path,'base64');

第五步：ctx.body = base64; 就可以返回给前台了

完毕　　！！！！以上为简单的啰嗦的逻辑   ！！！！

下边为代码，按照java的习惯，先从dao层开始写起来！！！！！！！

第一步：mysql的配置，这个config.js我就不列出来，就算不列出来，想必你也懂得！

import {

DB

} from'../config.js'asyncfunctionmysql(opt1, opt2) {

let mysql= require('mysql2/promise');

let connection=await mysql.createConnection({

host: DB.HOST,

user: DB.USER,

password: DB.PASSWORD,

database: DB.DATABASE,

port: DB.PROT

});

let [result, fields]=await connection.execute(opt1, opt2);

await connection.end();returnresult

}

module.exports= mysql

第二步：dao层，新增文件

import {

util,

mysql,

getsql,

} from'../tool';

class loginUser {//新增图片

async addPhoto(filePath){

console.log('进入了dao层');

let sql= 'insert into image (`image`) values ("'+ filePath + '+")';returnawait mysql(sql);

}

}

module.exports= new loginUser();

第三步：服务层，逻辑的处理，进行保存图片,导入第二不的dao层文件demo.js，这里服务层返回数据的格式不标准，不建议工作用，学习可以！

import loginUser from '../../dao/demo.js';

const fs= require('fs');

const path= require('path');

class login {

}/**

* 新增图片的方法

*

* @param {any} ctx

* @memberof login*/async addPhoto(ctx) {

console.log('进入了服务层');

let file=ctx.request.body.files.file;

let filePath= path.join(path.resolve('src/uploads/images'), file.name);

const reader=fs.createReadStream(file.path);

const writer=fs.createWriteStream(filePath);

reader.pipe(writer);

let result;try{

await loginUser.addPhoto(filePath).then(res=>{

console.log(res);

result=res;

})

ctx.body=result;

}catch(error) {

console.log(error);

}

}

}

module.exports= new login();

第四步：控制层，也叫路由层 ，调用了服务层demo.js中的addPhoto方法，这个里边啥都不用写，只需要对外暴露即可！

import KoaRouter from 'koa-router'import service from'../service'const router= newKoaRouter({

prefix:'/loginuser'})

router.post('/addPhoto',demo.addPhoto);

第五步：前段页面使用element-ui,把action写成路由对外暴露的路径即可，这里为loginuser/addPhoto

以上为保存的逻辑！写的已经很详细了！！！

下边是查询的，我就只列出服务层的代码，逻辑部分，否则有凑字数嫌疑，最重要的就是使用fs.readFileSync这个方法，还有如何拼凑base64，就这俩难点！

//查询图片服务

async findImg(ctx) {

console.log('进入图片查询服务层');

let result=[];try{

await loginUser.findImg().then(res=>{

let index= 0;for(let val of res) {

let read= fs.readFileSync(val.image,"base64");

let data= "data:image/jpeg;base64,"+read;

result.push(data);

index++;

}

})

console.log('开始执行ctx.body');

console.log(result);

ctx.body=result;

}catch(error) {

}

}

我把数据库的字段也列一下吧

没错，就一个字段，还是varchar类型我给了256个长度！

最后：谢谢查看！！！！！！！

连接：

koa2接受文件：http://www.ruanyifeng.com/blog/2017/08/koa.html

base64拼接：https://www.cnblogs.com/x-st/p/5220282.html

koa2官网demo：https://github.com/ruanyf/koa-demos/blob/master/demos/21.js

欢迎一起探讨node的学习曲线，如何搭建好的koa2框架！ 邮箱：zhou8337626@163.com