纯前端使用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 解决通过this.$refs来获取DOM或者组件报错问题
这篇文章主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue 基于abstract 路由模式 实现页面内嵌的示例代码
这篇文章主要介绍了vue 基于abstract 路由模式 实现页面内嵌的示例代码,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下2020-12-12
vue中el-date-picker type=daterange日期清空时不回显的解决
这篇文章主要介绍了vue中el-date-picker type=daterange日期清空时不回显的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-07-07
解决webpack-bundle-analyzer的问题大坑
这篇文章主要介绍了解决webpack-bundle-analyzer的问题大坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-06-06
Vue+ElementUI实现动态更换任意主题色(动态换肤)的全过程
众所周知Element-UI有换肤功能,下面这篇文章主要给大家介绍了关于Vue+ElementUI实现动态更换任意主题色(动态换肤)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02


最新评论