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

这篇具有很好参考价值的文章主要介绍了纯前端使用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文章来源地址https://www.toymoban.com/news/detail-848143.html

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文件服务器，粘贴直接可用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！