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' async function mysql(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(); return result
} 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 + '+")';
return await 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 = new KoaRouter({
prefix: '/loginuser'
})
router.post('/addPhoto',demo.addPhoto);

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

<el-upload
action="loginuser/addPhoto"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:multiple="false">
<i class="el-icon-plus"></i>
</el-upload>

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

下边是查询的,我就只列出服务层的代码,逻辑部分,否则有凑字数嫌疑,最重要的就是使用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) { }
}

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

element-vue-koa2-mysql实现文件上传

没错,就一个字段,还是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

上一篇:[js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解


下一篇:javafx之CSS初探