TypeScript前端上传文件到MinIO怎么实现
导读:本文共2858字符,通常情况下阅读需要10分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:什么是MinIO?MinIO 是一款高性能、分布式的对象存储系统. 它是一款软件产品, 可以100%的运行在标准硬件。即X86等低成本机器也能够很好的运行MinIO。本地Docker部署测试服务器dockerpullbitnami/minio:latestMINIO_ROOT_USER最少3个字符MINIO_ROOT_PASSWORD最少8个字符第一次运行的时候,服务会自动关闭,手动再次启动... ...
目录
(为您整理了一些要点),点击可以直达。MinIO 是一款高性能、分布式的对象存储系统. 它是一款软件产品, 可以100%的运行在标准硬件。即X86等低成本机器也能够很好的运行MinIO。
它有3个API可供调用:
putObject 从流上传
fPutObject 从文件上传
presignedPutObject 提供一个临时的上传链接以供上传
使用1和2的方式的话,在前端需要暴露出连接MinIO的访问密钥,很不安全,而且官方的Js客户端压根就没想过开放给浏览器.
而3的话,可以由服务端生成一个临时的上传链接提供给前端上传之用,而无需要暴露访问MinIO的密钥,非常的安全,我采用的是第三种方式.
在TypeScript下,我们可用的有三种方式实现文件上传:
XMLHttpRequest
Fetch API
Axios
需要注意的是: 事实上,后两种API都是封装的XMLHttpRequest.
我试过了用POST
去上传文件,但是显然的是:我失败了.必须得用PUT
去上传.
看了不少文章都是这么干的: 构造一个FormData
,然后把文件打进去,如果用putObject
和fPutObject
这两种方式上传,这是没问题的,但是使用presignedPutObject
则是不行的,直接发送File
就可以了.
如果使用以上的方式上传,文件头会被插入一段数据,看起来像是这样子的:
它是遵照了 rfc1867 定义的协议.
直接使用XMLHttpRequest
和Fetch API
都会自动填写成为文件真实的Content-Type
.而Axios
则不会,需要自己填写进去,或许是我不会使用Axios
,但是这是一个需要注意的地方,否则在MinIO里边的Content-Type
会被填写成为Axios
默认的Content-Type
,或者是你自己指定的.
TypeScript前端上传文件到MinIO怎么实现的详细内容,希望对您有所帮助,信息来源于网络。