当前位置:首页 » 《随便一记》 » 正文

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

2 人参与  2024年04月08日 19:15  分类 : 《随便一记》  评论

点击全文阅读


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("上传失败,请重新上传!");    }  });}//获取上传的URLminioClient.presignedPutObject(    bucketName,//桶名称    fileName,//文件名称    1000 * 60 * 5,//URL有效期    function (err, presignedUrl) {//错误的回调方法      if (err) return console.log(err);      let url = presignedUrl;      uploadByUrl(url, fileObj.value);    }  );


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/92477.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1