使用pre-signed URLs通过浏览器上传 无中间件前端直传 minio
使用presigned URLs,你可以让浏览器直接上传一个文件到S3服务,而不需要暴露S3服务的认证信息给这个用户。下面就是使用minio-js实现的一个示例程序。
服务端代码
const MinIO = require('minio')var client = new MinIO.Client({endPoint: 'play.min.io',port: 9000,useSSL: true,accessKey: 'Q3AM3UQ867SPQQA43P2F',secretKey: 'zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG'
})
//初始化MinIO client对象,用于生成presigned upload URL。// express是一个小巧的Http server封装,不过这对任何HTTP server都管用。
const server = require('express')()
//设置跨域访问
server.all('*', function (req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "X-Requested-With");res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");res.header("X-Powered-By", ' 3.2.1');res.header("Content-Type", "application/json;charset=utf-8");next();
});
server.get('/presignedUrl', (req, res) => {client.presignedPutObject('uploads', req.query.name, (err, url) => {if (err) throw errres.end(url)})
})server.get('/', (req, res) => {res.sendFile(__dirname + '/index.html');
})server.listen(8080)
客户端代码
用户通过浏览器选择了一个文件进行上传,然后在方法内部从Node.js服务端获得了一个URL。然后通过Fetch API往这个URL发请求,直接把文件上传到play.min.io:9000。
<input type="file" id="selector" multiple>
<button onclick="upload()">Upload</button><div id="status">No uploads</div><script type="text/javascript">// `upload` iterates through all files selected and invokes a helper function called `retrieveNewURL`.function upload() {// Get selected files from the input element.var files = document.querySelector("#selector").files;for (var i = 0; i < files.length; i++) {var file = files[i];// 从服务器获取一个URLretrieveNewURL(file, (file, url) => {// 上传文件到服务器uploadFile(file, url);});}}// 发请求到Node.js server获取上传URL。// `retrieveNewURL` accepts the name of the current file and invokes the `/presignedUrl` endpoint to// generate a pre-signed URL for use in uploading that file: function retrieveNewURL(file, cb) {fetch(`/presignedUrl?name=${file.name}`).then((response) => {response.text().then((url) => {cb(file, url);});}).catch((e) => {console.error(e);});}// 使用Fetch API来上传文件到S3。// ``uploadFile` accepts the current filename and the pre-signed URL. It then uses `Fetch API`// to upload this file to S3 at `play.min.io:9000` using the URL:function uploadFile(file, url) {if (document.querySelector('#status').innerText === 'No uploads') {document.querySelector('#status').innerHTML = '';}fetch(url, {method: 'PUT',body: file}).then(() => {// If multiple files are uploaded, append upload status on the next line.document.querySelector('#status').innerHTML += `<br>Uploaded ${file.name}.`;}).catch((e) => {console.error(e);});}
</script>
前端上传到 upload 的桶里去了 没有桶命可以建一个 可以继续再代码上做扩展 达到想要实现的效果 现在你就可以让别人访问网页,并直接上传文件到S3服务,而不需要暴露S3服务的认证信息。
本文由博客一文多发平台 OpenWrite 发布!
使用pre-signed URLs通过浏览器上传 无中间件前端直传 minio相关推荐
- IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
IE浏览器上传文件时本地路径变成"C:\fakepath\"的问题 博客分类: javascript HTML 在使用<input id="file_upl&quo ...
- Android之PC浏览器上传表单格式大文件到手机客户端read函数阻塞问题
1 .问题 PC浏览器上传表单格式大文件到手机服务器端,然后read文件真实数据时候出现阻塞. 比如 User-Agent: PostmanRuntime/7.26.1Accept: */*Cache ...
- android 阻塞式函数,Android之PC浏览器上传表单格式大文件到手机客户端read函数阻塞问题...
1 .问题 PC浏览器上传表单格式大文件到手机服务器端,然后read文件真实数据时候出现阻塞. 比如 User-Agent: PostmanRuntime/7.26.1 Accept: */* Cac ...
- Google浏览器上传文件卡死状态问题解决方案
今天无意间发现google浏览器上传文件卡死,尝试其他浏览器正常.各种google和度娘,各种方案都有,然而适合我的或者说能解决我的很少,可能我理解的不对.关键是Adobe Acrobat在作怪(有人 ...
- 解决不同浏览器上传文件filename不一样问题
解决不同浏览器上传文件filename不一样问题(学习自用) 今天在做实验的时候发现在不同的浏览器上上传文件的filename不一致 在ie浏览器的结果 在chrom浏览器中却能成功 解决方案:
- Google浏览器上传文件或者图片卡死状态问题解决方案
前些日子因为某些原因需要上传图片,发现在win7以上版本系统的chrome浏览器上传图片时会造成卡死的状态,由于上传图片不是特别的必要所以选了IE浏览器上传,之后就并没有关注这个问题想着将就一下就得了 ...
- 两步快速解决浏览器上传本地文件失败问题
两步快速解决浏览器上传本地文件失败问题 学校教学平台上传作业总是没法弹出本地目录,经过查资料和试验,我总结了解决方法,只需两步. 使用到的浏览器 ie浏览器 目录 两步快速解决浏览器上传本地文件失败问 ...
- IE浏览器上传文件报错:org.apache.tomcat.util.http.fileupload.FileUploadException: Stream ended unexpectedly
报错内容: 13:44:28.122 [http-nio-8081-exec-13] ERROR c.d.f.w.e.GlobalExceptionHandler - [notFount,64] - ...
- python模拟浏览器上传文件_Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)...
http协议本身的原始方法不支持multipart/form-data请求,这个请求由原始方法演变而来的. multipart/form-data的基础方法是post,也就是说是由post方法来组合实 ...
最新文章
- Linux之加密及CA证书
- 利用套接字实现进程通信一例
- CommonJS/AMD/CMD/UMD
- django-oscar接入paypal的时候提示Error 10001 - Internal Error
- java 解析gson_使用Java和Google GSON解析ESPN API
- OAuth2,JWT,Open-ID Connect和其他令人困惑的事物
- java如何抽象一辆车,java新职篇:面向对象之抽象
- HDU 2012 素数判断方式
- Highcharts在IE8中不能一次性正常显示的一种解决办法
- java oxm_spring使用OXM进行对象XML映射解析
- antd 选择文件夹_antd 手动上传文件
- 58欧氏空间05——对称变换和对称矩阵、实对称矩阵的标准形、正交相似、实对称矩阵的正交相似对角化
- mysql连接教程_MySQL 连接
- TDirectory.IsRelativePath是否相对路径
- Excel在统计分析中的应用—第五章—统计指数-Part3- 综合指数(现期加权指数(帕氏指数))
- DXP2004/Altium Desinger 自己画元器件和封装,及注意事项
- 第二章.外包银行面试-ZRGJ
- crypto-js 加密解密 (TS版本)
- 再探Direct3D流水线
- 【UV打印机】电气之负压系统(一)
热门文章
- rpc服务器不可用桌面图标消失,rpc服务器不可用,教您rpc服务器不可用怎么办
- 与计算机内存容量密切相关的,与计算机内存容量密切相关的是( )。
- 小飞升值记——(15)
- 2020年司钻(井下)考试题库及司钻(井下)考试APP
- react 使用qs
- 诺贝尔奖计算机二级,计算机二级ppt真题:制作介绍诺贝尔奖ppt
- 首次发布!《5G移动通信基站电磁辐射环境监测方法》征求意见
- 个人永久性免费-Excel催化剂功能第87波-将批量发送邮件做到极致化,需借力Outlook...
- nginx指定目录安装
- JIRA的使用介绍(一)- 概念篇(笔记)