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

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

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

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. }
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. );