网站首页 > 技术文章 正文
之前有个项目里需要用到文件系统来存储文件,由于是小型项目,也没有大文件要存,接个文件系统(比如阿里的OSS)不划算,就直接用MySQL来存了。
具体来说,MySQL有一个数据类型叫BLOB,可以存放类似于“文件二进制数据”的东西。文档、PDF、压缩包、excel等等都能支持,LongBlob的话最多可以存4G,当然实际不建议放大文件,毕竟要考虑效率问题。
用下来发现在这种小型需求里,或者是临时性的demo,BLOB使用简单方便,真的很香。
数据结构如下
当然了,用Navicat这样的工具是没法预览的,只能看到文件大小,如下
下面看看在前端如何存储及解析数据(示例为TypeScript语言)。
项目用到了Prisma,定义数据类型时使用Bytes就可以,如下
model File {
id String @id @default(uuid())
fileName String @map("file_name")
url String
content Bytes
}
如果我们需要的数据是请求服务端接口获取的,我们可以使用如下所示的方式来接收
const response = await axios.postForm(
`${process.env.SERVICE_URL}/file`,
param,
{
responseType: "arraybuffer",
}
);
const responseBuffer = response.data as Buffer;
然后封装成Buffer数据,存入数据库
content: {
type: "Buffer",
data: responseBuffer as any,
} as any
取的时候(一般是下载),我们可以像下面这样做
const fileReader = new FileReader();
fileReader.readAsDataURL(new Blob([Buffer.from(content)]));
fileReader.onloadend = () => {
let a = document.createElement("a");
a.download = fileName;
a.style.display = "none";
// 生成的base64编码
let url = fileReader.result;
a.href = url as string;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
关键是这一句new Blob([Buffer.from(content)]),就可以将数据解析出来啦。
是不是简单方便呢,如果有这样的需求,不妨考虑一下!
- 上一篇: 如何在 Serverless 架构下优雅上传文件?
- 下一篇: 富文本原理了解一下? 富文本是啥意思
猜你喜欢
- 2024-11-13 JS二进制:Blob、File、FileReader、ArrayBuffer、Base64
- 2024-11-13 实现HTML5网站中常见的拖拽上传文件
- 2024-11-13 input上传图片并压缩(vue,前端,js)
- 2024-11-13 怎样用Nodejs,Express和FFmpeg.wasm构建一个处理多媒体的API
- 2024-11-13 为什么 JS 开发者更喜欢 Axios 而不是 Fetch?
- 2024-11-13 leaflet地图截图批量导出 leaflet 底图
- 2024-11-13 拖拽外部文件进行读取-FileReader
- 2024-11-13 JavaScript `FileReader` 接口提供的文件处理方法
- 2024-11-13 vue手把手教学~搭建web聊天室 vue实现聊天功能
- 2024-11-13 Html5 上传图片 移动端、PC端通用
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-