纯前端使用Vue3上传文件到minio文件服务器(粘贴可直接用)

黄金猫

1、首先安装minio的插件，因为我使用的vue3，不支持模块化的导入，所以我们使用一个别人写好的vue2的包

1. npm install --save minio-js   

复制代码

2、在需要上传文件的页面导入这个包

1. import { Minio } from "minio-js";

复制代码

3、创建一个minio的客户端

1. minioClient = new Minio.Client({
   
2.       endPoint: '192.168.1.111', // minio的ip，直接替换自己的即可
   
3.       port: 9000, // 端口号，若地址为类似test.minio.com,就不必写端口号
   
4.       useSSL: false, // 是否使用ssl
   
5.       accessKey: accessKey, // 登录的accessKey
   
6.       secretKey: secretKey,
   
7.       sessionToken: token,
   
8.     });

复制代码

这里说明一下，accessKey、secretKey、sessionToken都是通过接口获取到的临时凭证
4、通过带预签名的url上传，首先我们需要获取到这个url,minioAPI提供了， minioClient.presignedPutObject可以获取带签名的URL

1. function uploadByUrl(url, data) {
   
2.   loadding.value = true;
   
3.   return fetch(url, {
   
4.     mode: "cors", // 解决跨域
   
5.     headers: {
   
6.       Accept: "application/json,text/plain,/",
   
7.     },
   
8.     method: "PUT",
   
9.     body: data,//data就是文件对象
   
10.   }).then((response) => {
    
11.     if (response.ok) {
    
12.       // 处理成功的情况
    
13.       loadding.value = false;
    
14.       proxy.$modal.msgSuccess("上传成功");
    
15.     } else {
    
16.       // 处理失败的情况
    
17.       proxy.$refs["my-upload"].clearFiles();
    
18.       throw new Error("上传失败，请重新上传！");
    
19.     }
    
20.   });
    
21. }
    
22. 
    
23. //获取上传的URL
    
24. minioClient.presignedPutObject(
    
25.     bucketName,//桶名称
    
26.     fileName,//文件名称
    
27.     1000 * 60 * 5,//URL有效期
    
28.     function (err, presignedUrl) {//错误的回调方法
    
29.       if (err) return console.log(err);
    
30.       let url = presignedUrl;
    
31.       uploadByUrl(url, fileObj.value);
    
32.     }
    
33.   );

复制代码

总结
到此这篇关于纯前端使用Vue3上传文件到minio文件服务器的文章就介绍到这了,更多相关Vue3上传文件到minio文件服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/319180v68.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！