纯前端使用Vue3上传文件到minio文件服务器(粘贴可直接用)
1、首先安装minio的插件,因为我使用的vue3,不支持模块化的导入,所以我们使用一个别人写好的vue2的包
npm install --save minio-js
2、在需要上传文件的页面导入这个包
import { Minio } from "minio-js";
3、创建一个minio的客户端
minioClient = new Minio.Client({ endPoint: '192.168.1.111', // minio的ip,直接替换自己的即可 port: 9000, // 端口号,若地址为类似test.minio.com,就不必写端口号 useSSL: false, // 是否使用ssl accessKey: accessKey, // 登录的accessKey secretKey: secretKey, sessionToken: token, });
这里说明一下,accessKey、secretKey、sessionToken都是通过接口获取到的临时凭证
4、通过带预签名的url上传,首先我们需要获取到这个url,minioAPI提供了, minioClient.presignedPutObject可以获取带签名的URL
function uploadByUrl(url, data) { loadding.value = true; return fetch(url, { mode: "cors", // 解决跨域 headers: { Accept: "application/json,text/plain,/", }, method: "PUT", body: data,//data就是文件对象 }).then((response) => { if (response.ok) { // 处理成功的情况 loadding.value = false; proxy.$modal.msgSuccess("上传成功"); } else { // 处理失败的情况 proxy.$refs["my-upload"].clearFiles(); throw new Error("上传失败,请重新上传!"); } }); } //获取上传的URL minioClient.presignedPutObject( bucketName,//桶名称 fileName,//文件名称 1000 * 60 * 5,//URL有效期 function (err, presignedUrl) {//错误的回调方法 if (err) return console.log(err); let url = presignedUrl; uploadByUrl(url, fileObj.value); } );
总结
到此这篇关于纯前端使用Vue3上传文件到minio文件服务器的文章就介绍到这了,更多相关Vue3上传文件到minio文件服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue读取本地静态.md并侧边栏导航跳转、展示.md文件的操作方法
这篇文章主要介绍了Vue读取本地静态.md并侧边栏导航跳转、展示.md文件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08el-form表单el-form-item验证规则里prop一次验证两个或多个值问题
这篇文章主要介绍了el-form表单el-form-item验证规则里prop一次验证两个或多个值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05Vue项目报错:Uncaught SyntaxError: Unexpected token <
这篇文章主要介绍了Vue项目报错:Uncaught SyntaxError: Unexpected token <,在引入第三方依赖的 JS 文件时,遇到的一个问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论