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

 更新时间:2024年04月03日 09:55:19   作者:老是写Bug  
vue是目前最流行的前端框架,下面这篇文章主要给大家介绍了关于纯前端使用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 Echarts实现带滚动效果的柱形图

    Vue Echarts实现带滚动效果的柱形图

    这篇文章主要为大家详细介绍了Vue Echarts实现带滚动效果的柱形图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue读取本地静态.md并侧边栏导航跳转、展示.md文件的操作方法

    Vue读取本地静态.md并侧边栏导航跳转、展示.md文件的操作方法

    这篇文章主要介绍了Vue读取本地静态.md并侧边栏导航跳转、展示.md文件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • Django Vue实现动态菜单和动态权限

    Django Vue实现动态菜单和动态权限

    本文主要介绍了Django Vue实现动态菜单和动态权限,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • el-form表单el-form-item验证规则里prop一次验证两个或多个值问题

    el-form表单el-form-item验证规则里prop一次验证两个或多个值问题

    这篇文章主要介绍了el-form表单el-form-item验证规则里prop一次验证两个或多个值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vite+vue3+ts项目中提示无法找到模块的问题及解决

    vite+vue3+ts项目中提示无法找到模块的问题及解决

    这篇文章主要介绍了vite+vue3+ts项目中提示无法找到模块的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue3的效率提升主要表现在哪些方面示例解析

    Vue3的效率提升主要表现在哪些方面示例解析

    Vue3带来了许多性能优化和效率提升的特性,本文将重点讨论Vue3在静态提升、预字符串化、缓存事件处理函数、Block Tree和PatchFlag方面的改进,我们将通过对比Vue2和Vue3的编译结果来说明这些方面的效率提升
    2023-12-12
  • 代码分析vue中如何配置less

    代码分析vue中如何配置less

    在本篇文章中,我们给大家详细讲述了vue中如何配置less的详细代码和步骤,有需要的朋友跟着学习下。
    2018-09-09
  • Vue项目报错:Uncaught SyntaxError: Unexpected token <

    Vue项目报错:Uncaught SyntaxError: Unexpected token <

    这篇文章主要介绍了Vue项目报错:Uncaught SyntaxError: Unexpected token <,在引入第三方依赖的 JS 文件时,遇到的一个问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Vue 3中的异步操作管理示例分析

    Vue 3中的异步操作管理示例分析

    在现代Web应用开发中,异步操作是常见的挑战,本文介绍了Vue3中管理多个异步操作的方法,帮助开发者提高编码效率和应用性能,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • Vue数据代理的原理和实现

    Vue数据代理的原理和实现

    数据代理是什么?通过一个对象代理,对另一个对象中属性的操作,简单就是说:可以通过 对象b 对 对象a 中的属性进行操作,这里我学到的数据代理是用Object.defineProperty这个方法进行操作
    2022-11-11

最新评论