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

 更新时间:2024年04月03日 09:55:19   作者:老是写Bug  
vue是目前最流行的前端框架,下面这篇文章主要给大家介绍了关于纯前端使用Vue3上传文件到minio文件服务器的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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文件服务器内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • Vue2.0+Vux搭建一个完整的移动webApp项目的示例

    Vue2.0+Vux搭建一个完整的移动webApp项目的示例

    这篇文章主要介绍了Vue2.0+Vux搭建一个完整的移动webApp项目的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vue中路由跳转不计入history的操作

    vue中路由跳转不计入history的操作

    这篇文章主要介绍了vue中路由跳转不计入history的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue-router重定向和路由别名的使用讲解

    vue-router重定向和路由别名的使用讲解

    今天小编就为大家分享一篇关于vue-router重定向和路由别名的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 解决vue页面刷新或者后退参数丢失的问题

    解决vue页面刷新或者后退参数丢失的问题

    下面小编就为大家分享一篇解决vue页面刷新或者后退参数丢失的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue.js实现的经典计算器/科学计算器功能示例

    vue.js实现的经典计算器/科学计算器功能示例

    这篇文章主要介绍了vue.js实现的经典计算器/科学计算器功能,具有基本四则运算计算器以及科学计算器的功能,可实现开方、乘方、三角函数以及公式运算等功能,需要的朋友可以参考下
    2018-07-07
  • vue2.0使用swiper组件实现轮播的示例代码

    vue2.0使用swiper组件实现轮播的示例代码

    下面小编就为大家分享一篇vue2.0使用swiper组件实现轮播的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue mounted 调用两次的完美解决办法

    vue mounted 调用两次的完美解决办法

    在开发中发现其中一个页面moutned调用了两次,而其他页面正常,表示很懵逼,然后查找原因,终于找到了,其实归根到底是要知道mounted的调用机制问题。这篇文章主要介绍了vue mounted 调用两次的解决办法,需要的朋友可以参考下
    2018-10-10
  • vue多级复杂列表展开/折叠及全选/分组全选实现

    vue多级复杂列表展开/折叠及全选/分组全选实现

    这篇文章主要介绍了vue多级复杂列表展开/折叠及全选/分组全选实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue3中使用swiper的完整版教程(超详细!)

    vue3中使用swiper的完整版教程(超详细!)

    工作中日常笔记,vue中使用swiper插件,在pc端和h5端也是常用的插件,下面这篇文章主要给大家介绍了关于vue3中使用swiper的完整版教程,需要的朋友可以参考下
    2023-04-04
  • Vue动态数据实现?el-select?多级联动、数据回显方式

    Vue动态数据实现?el-select?多级联动、数据回显方式

    这篇文章主要介绍了Vue动态数据实现?el-select?多级联动、数据回显方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07

最新评论

?


http://www.vxiaotou.com