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

阅读群体建议:第一次使用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

element-vue-koa2-mysql实现文件上传的更多相关文章

  1. php操作mysql关于文件上传、存储

    php+前端+mysql实现文件上传并储存 我们都知道很多网站都需要上传文件,最普遍的就是图片上传,即是用户头像等等: 关于mysql+php实现文件查询,存储大致两个方式, 1.直接把文件写入mys ...

  2. vue使用formData进行文件上传

    本文为博主原创,未经允许不得转载 1.vue页面 <ux-form ref="formRef" layout="vertical"> <ux- ...

  3. vue+element-ui, el-upload组件 文件上传之前return false,会自动调用文件移除回调问题

    日常搬砖的时候,项目中在使用element-ui的上传组件,但是当我在文件上传文件之前的回调里面做了些文件格式的二次校验和文件大小的校验的时 然后 return false 会发现调用 文件移除的回调 ...

  4. vue 使用element-ui upload文件上传之后怎么清空

    首先上传组件中一定要绑定这两个属性: ref,和 :file-list,如果没有ref,即使 用 this.$refs.upload.clearFiles()也不行,因为这时候this.$refs为空 ...

  5. nginx -stream(tcp连接)反向代理配置 实现代理mysql以及文件上传

    原文链接:https://blog.csdn.net/Activity_Time/article/details/95767390 1. stream模块安装 nginx默认安装的时候无法加载流str ...

  6. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  7. vue + element 文件上传 并将文件转 base64

    当时有一个需求 是需要用到上传文件这个功能,并且需要将文件转为 base64 给到后台.网上找的全是啥图片转base64 肯定是因为这类需求比较常见.当时有点懵了.后面一想,都他娘是文件啊.然后就找到 ...

  8. springboot+vue实现文件上传

    https://blog.csdn.net/mqingo/article/details/84869841 技术: 后端:springboot 前端框架:vue 数据库:mysql pom.xml: ...

  9. element中文件上传

    vue+element 文件操作 作者:一粒尘土 时间:2019-3-17 注:以下操作针对 vue-cli 目录 使用 组件常用参数 组件常用方法 上传文件 上传文件格式限制 回显文件 下载文件 删 ...

  10. VUE项目中文件上传兼容IE9

    项目使用VUE编写,UI是ElementUI,但是Element的Upload组件是不兼容IE9的.因为IE9中无法使用FormData. 查找资料基本有两种解决方法:1.引入JQuery和jQuer ...

随机推荐

  1. python笔记15-集合

    集合也是一种数据类型,一个类似列表东西,它的特点是无序的,不能根据下标来取值,不重复的,也就是说集合中是没有重复的数据 #定义集合:# #方法1:nums = [1,1,1,1,23,4,56]#定义 ...

  2. document.write与document.getElementById的区别

    document.write改变的是整个HTML页面(文档),document.getElementById("demo").innerHTML= 改变的是局部属性

  3. Alpha冲刺5

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/9989898.html 作业博客:https://edu.cnblogs.com/campus/ ...

  4. split根据一个元素分割语句

    a = ‘https://www.baidu.com/s?wd=%E7%AE%80%E4%B9%A6&rsv_spt=1&rsv_iqid=0xdfa3666f00083a6f& ...

  5. 入门项目 A2 setting

    import os # 因为setting是设置模块,存放的是一些和系统关联的一些信息,比如对C,D盘符的路径调用 BASE_PATH = os.path.dirname(os.path.dirnam ...

  6. 分布式队列celery 异步----Django框架中的使用

    仅仅是个人学习的过程,发现有问题欢迎留言 一.celery 介绍 celery是一种功能完备的即插即用的任务对列 celery适用异步处理问题,比如上传邮件.上传文件.图像处理等比较耗时的事情 异步执 ...

  7. python+flask开发小白第二天

    使用VSCode编译python web页面 1.先从最基础的说起吧,关于VSCode的使用: 运行python程序与运行java,c,c++程序一样,需要新建一个文件,第一个文件建议不要新建在本地的 ...

  8. oracle note

    null null为无效的,未指定的,未知的活不可预知的值 null不是空格或0 包含null 的数学表达式其结果都为空值 null 永远!= null 判断某个字段为null,用 ename is ...

  9. objdump和backtrace的配合使用

    在程序调试过程中程序崩溃的情况时有发生,把出问题时的调用栈信息打印出来是一种不错的解决办法. 当然还有一些其他方法:https://www.cnblogs.com/jiangyibo/p/865372 ...

  10. Linux shell脚本学习

    1.cgmod +x ./文件 获取执行权限,使脚本具有执行权限 2.  ./name.sh  执行脚本 ./为当前目录 直接使用name.sh系统会去PATH里面找name.sh,而PATH里只有/ ...