友情提示:这篇博客不会详细说明搭建过程
阅读群体建议:第一次使用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) { } }
我把数据库的字段也列一下吧
没错,就一个字段,还是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