TypeScript前端上传文件到MinIO示例详解
什么是MinIO?
MinIO 是一款高性能、分布式的对象存储系统. 它是一款软件产品, 可以100%的运行在标准硬件。即X86等低成本机器也能够很好的运行MinIO。
本地Docker部署测试服务器
docker pull bitnami/minio:latest # MINIO_ROOT_USER最少3个字符 # MINIO_ROOT_PASSWORD最少8个字符 # 第一次运行的时候,服务会自动关闭,手动再次启动就可以正常运行了. docker run -itd \ --name minio-server \ -p 9000:9000 \ -p 9001:9001 \ --env MINIO_ROOT_USER="root" \ --env MINIO_ROOT_PASSWORD="123456789" \ --env MINIO_DEFAULT_BUCKETS='images' \ --env MINIO_FORCE_NEW_KEYS="yes" \ --env BITNAMI_DEBUG=true \ bitnami/minio:latest
上传的API
它有3个API可供调用:
- putObject 从流上传
- fPutObject 从文件上传
- presignedPutObject 提供一个临时的上传链接以供上传
使用1和2的方式的话,在前端需要暴露出连接MinIO的访问密钥,很不安全,而且官方的Js客户端压根就没想过开放给浏览器.
而3的话,可以由服务端生成一个临时的上传链接提供给前端上传之用,而无需要暴露访问MinIO的密钥,非常的安全,我采用的是第三种方式.
TypeScript实现
在TypeScript下,我们可用的有三种方式实现文件上传:
- XMLHttpRequest
- Fetch API
- Axios
需要注意的是: 事实上,后两种API都是封装的XMLHttpRequest.
1. XMLHttpRequest
function xhrUploadFile(file: File, url: string) { const xhr = new XMLHttpRequest(); xhr.open('PUT', url, true); xhr.send(file); xhr.onload = () => { if (xhr.status === 200) { console.log(`${file.name} 上传成功`); } else { console.error(`${file.name} 上传失败`); } }; }
2. Fetch API
function fetchUploadFile(file: File, url: string) { fetch(url, { method: 'PUT', body: file, }) .then((response) => { console.log(`${file.name} 上传成功`, response); }) .catch((error) => { console.error(`${file.name} 上传失败`, error); }); }
3. Axios
function axiosUploadFile(file: File, url: string) { const instance = axios.create(); instance .put(url, file, { headers: { 'Content-Type': file.type, }, }) .then(function (response) { console.log(`${file.name} 上传成功`, response); }) .catch(function (error) { console.error(`${file.name} 上传失败`, error); }); }
从后端获取临时上传链接
function retrieveNewURL(file: File, cb: (file: File, url: string) => void) { const url = `http://localhost:8080/presignedUrl/${file.name}`; axios.get(url) .then(function (response) { cb(file, response.data.data.url); }) .catch(function (error) { console.error(error); }); }
上传文件
function onXhrUploadFile(file?: File) { console.log('onXhrUploadFile', file); if (file) { retrieveNewURL(file, (file, url) => { xhrUploadFile(file, url); }); } }
踩过的坑
1. presignedPutObject方式上传提交的方法必须得是PUT
我试过了用POST
去上传文件,但是显然的是:我失败了.必须得用PUT
去上传.
2. 直接发送File
即可
看了不少文章都是这么干的: 构造一个FormData
,然后把文件打进去,如果用putObject
和fPutObject
这两种方式上传,这是没问题的,但是使用presignedPutObject
则是不行的,直接发送File
就可以了.
fileUpload(file) { const url = 'http://example.com/file-upload'; const formData = new FormData(); formData.append('file', file) const config = { headers: { 'content-type': 'multipart/form-data' } } return post(url, formData,config) }
如果使用以上的方式上传,文件头会被插入一段数据,看起来像是这样子的:
------WebKitFormBoundaryaym16ehT29q60rUx Content-Disposition: form-data; name="file"; filename="webfonts.zip" Content-Type: application/zip
它是遵照了 rfc1867 定义的协议.
3. 使用Axios上传的时候,需要自己把Content-Type填写成为file.type
直接使用XMLHttpRequest
和Fetch API
都会自动填写成为文件真实的Content-Type
.而Axios
则不会,需要自己填写进去,或许是我不会使用Axios
,但是这是一个需要注意的地方,否则在MinIO里边的Content-Type
会被填写成为Axios
默认的Content-Type
,或者是你自己指定的.
示例代码
Github: github.com/tx7do/minio…
- 后端采用go+gin实现,用于调用MinIO的API
presignedPutObject
获取临时上传Url. - 前端有React和Vue的实现,要实现进度条和多文件上传也是容易的.
以上就是TypeScript前端上传文件到MinIO示例详解的详细内容,更多关于TypeScript前端上传到MinIO的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7153078635551784990
相关文章
- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 这篇文章主要给大家分享的是TypeScript 索引签名的理解,索引签名由方括号中的索引名称及其类型组成,后面是冒号和值类型:{ [indexName: KeyType]: ValueType }, KeyType 可以是一个 string、number 或 symbol,而ValueType 可以是任何类型,下面就俩简单了解一下吧...2021-10-15
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
借助FileReader实现将文件编码为Base64后通过AJAX上传
这篇文章主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下...2015-12-25- 这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12
- 本文实例讲述了PHP多文件上传类,分享给大家供大家参考。具体如下:<?phpclass Test_Upload{ protected $_uploaded = array(); protected $_destination; protected $_max = 1024000; protected $_messages =...2015-10-30
- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
- 这篇文章主要介绍了使用TS来编写express服务器的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-25
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-22- 这篇文章主要介绍了TypeScript魔法堂之枚举的超实用手册,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-29
- 这篇文章主要介绍了你不知道的 TypeScript 高级类型(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-29
- php 大文件带进度的上传,一直是一个令php程序员很苦恼的问题。查询baidu 、Google ,大体做带进度的上传方式为:flash+php,socket,apc+php等,下面我介绍了apc +php+ajax制作的带进度的上传,并贴出源码,希望对大家有用。 Altern...2015-10-30
- 这篇文章主要为大家详细介绍了C#文件上传的简单实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了js 实现文件上传样式,下面文章举例说明js 是如何实现文件上传样式的,附有代码详细解说,需要的朋友可以参考一下,希望对你有所帮助...2021-10-21
- 与如何在React项目中应用TypeScript类类似在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator,需要的小伙伴可续看下文具体介绍...2021-09-15
- 这篇文章主要介绍了CocosCreator入门教程之用TS制作第一个游戏,对TypeScript感兴趣的同学,一定要看一下...2021-04-16
- 这篇文章主要给大家介绍了关于TypeScript中条件类型精读与实践的相关资料,,条件类型就是在初始状态并不直接确定具体类型,而是通过一定的类型运算得到最终的变量类型,需要的朋友可以参考下...2021-10-05