vue2、vue3实现用aws s3协议操作minio进行文件存储和读取

亚马逊s3 API文档

最开始安装了@aws-sdk/client-s3,但是不知道为什么一直报错,所以用了aws-sdk

准备工作:

需要已经搭建好minio、创建好桶

1. vue2

安装插件

yarn add aws-sdk 

s3配置

var AWS = require("aws-sdk");
AWS.config.update({accessKeyId: accessKeyId,secretAccessKey: secretAccessKey,endpoint: `http://${minio的ip地址}:${minio的端口}`,s3ForcePathStyle: true, // 如果使用 MinIO,请设置为truesignatureVersion: "v4",
});
let s3 = new AWS.S3({apiVersion: "2006-03-01",
});

封装上传文件函数 utils/minio.js中

// 上传文件
export const uploadFile = (bucketName, fileName, file, type, size) => {return new Promise((reslove, reject) => {s3.putObject({Bucket: bucketName,Key: fileName,Body: file,ACL: 'public-read',ContentType: type,ContentLength: size},(err, data) => {if (err) {console.log(err);// 上传失败} else if (data) {console.log(data);reslove(data.Location);}});});
};

注意: ContentType 必传 不传的话上传到minio中的文件无法进行在线预览。

调用

import { uploadFile } from "@/utils/minio.js";uploadS3File(bucketName,fileName,file,mineType,fileSize).then((location) => {// location为minio中etag的值 若返回location则为上传成功
})

2. vue3 + vite

vue3中与vue2中的使用方法基本相同,不同的是插件的引用。

1.vue3中无法使用require所以采用import引入

import AWS from 'aws-sdk'

2.可能会报错globel不存在

创建pollyfill.js文件, 内容如下

if (typeof window.global === "undefined") {window.global = window;
}

3.在main.js中引入(注意放在createApp之前)

import '@/utils/pollyfill'
import { createApp } from "vue";

4.在index.html中加入

<script>glboal = globalThis</script>

即可引入成功

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/577923.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解析翻页设计的最佳实践和后端设计概要

文章目录 解析翻页设计的最佳实践和后端设计概要缘起BFF评审中的翻页问题AuditLog翻页问题的处理分页设计思考 关键点总结进一步思考 解析翻页设计的最佳实践和后端设计概要 缘起 在技术开发过程中&#xff0c;翻页操作的设计常常涉及到多种需求和技术考量。回顾最近的讨论和…

阿里云 ECS Docker、Docker Compose安装

https://help.aliyun.com/document_detail/51853.html https://docs.docker.com/compose/install/ Centos https://blog.csdn.net/Alen_xiaoxin/article/details/104850553 systemctl enable dockerdocker-compose安装 https://blog.csdn.net/qq465084127/article/details/…

CentOS 8.2 安装 Mysql 5.7.26(单机)

Mysql二进制包: mysql-5.7.26-linux-glibc2.12-x86_64.tar.gz 1、卸载旧环境 rpm -qa|grep mysql rpm -qa|grep mariadb rpm -e XXX.rpm --nodeps # 强制卸载rpm包 rm -rf /etc/my.cnf rm -rf /etc/mysql rm -rf /usr/local/mysql 2、安装依赖包 yum -y install libaio yum…

vscode括号颜色突然变成白色的了,怎么解决

更新版本后发现vscode的各种括号都变成了白色&#xff0c;由于分色括号已经使用习惯&#xff0c;突然变成白色非常不舒服&#xff0c;尝试多次后&#xff0c;为大家提供一下几种解决方式&#xff0c;希望能帮到同样受到此种困惑的你&#xff1a; 第一种&#xff1a; 首先打开…

WebGL开发建筑和设计教育应用

使用 WebGL 开发建筑和设计教育应用可以为学生提供沉浸式的三维体验&#xff0c;使他们能够在虚拟环境中探索建筑结构、材料和设计理念。以下是开发建筑和设计教育应用的一般步骤&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&…

计算机视觉基础(13)——深度估计

前言 本节是计算机视觉的最后一节&#xff0c;我们将学习深度估计。从深度的概念和度量入手&#xff0c;依次学习单目深度估计和双目/多目深度估计&#xff0c;需要知道深度估计的经典方法&#xff0c;掌握深度估计的评价标准&#xff0c;注意结合对极几何进行分析和思考。 一、…

【LeetCode刷题笔记】动态规划(四)

背包问题 0-1 背包问题 有一个背包,它的容量为 C现在有 n 种不同的物品,他们的编号分别是 0...n-1。每一种物品只有一个。在这 n 种物品中,第 i 个物品的重量是 w[i],它的价值为 v[i]问题是:可以向这个背包中放哪些物品,使得在不超过背包容量的基础上,背包中物品的总价…

【华为OD题库-110】反转每对括号间的子串-java

题目 给出一个字符串s(仅含有小写英文字母和括号)。 请你按照从括号内到外的顺序&#xff0c;逐层反转每对匹配括号中的字符串&#xff0c;并返回最终的结果。注意&#xff0c;您的结果中不应包含任何括号。 示例1: 输入: s “(abcd)” 输出: “dcba” 示例2: 输入: s “(u(l…

MongoDB视图的修改与删除

目录 修改视图 删除视图 视图&#xff0c;为mongodb的操作和数据安全上提供了便利。但伴随着业务逻辑的发展或数据库维护人员操作当中产生的错误&#xff0c;视图难免需要维护修改。例如增加字段&#xff0c;修改视图中的计算逻辑等。 修改视图 查询mongodb的官方文档&…

Linux的基本命令

文章目录 grep的基本查询grep的高亮查询 grep的基本查询 grep命令可以用于在文件中查找指定内容&#xff0c;并将包含该内容的行打印出来。以下是几种不同的实现方法&#xff1a; 使用基本语法格式&#xff1a; &#xff08;1&#xff09;grep “要查找的内容” 文件名 例如…

【SpringCloud笔记】(10)消息总线之Bus

Bus 前言 戳我了解Config 学习Config中我们遇到了一个问题&#xff1a; 当我们修改了GitHub上配置文件内容&#xff0c;微服务需要配置动态刷新并且需要手动向客户端发送post请求刷新微服务之后才能获取到GitHub修改过后的内容 假如有多个微服务客户端3355/3366/3377…等等…

Android 手机对于Arduino蓝牙控制解决方案

1、Android系统概述 ​ Android 系统是 Google 公司基于 Linux 内核开发的移动端操作系统,适用于智能手机智能手表平板电脑等设备&#xff0c;最新的版本为 7.1。Android系统具有免费开源的优势,任何企业与个人都可以查阅公开的 API 文档&#xff0c;并在自己开发的应用中通过调…

xlua源码分析(四) lua访问C#的值类型

xlua源码分析&#xff08;四&#xff09; lua访问C#的值类型 上一节我们主要探讨了C#是如何使用interface和delegate访问lua层的table和function的&#xff0c;本节我们跟着Examples 05_NoGc&#xff0c;来看看xlua是如何实现lua层无gc访问C#的值类型的。 首先例子中用到的lua…

使用OpenSSL生成自签名SSL/TLS证书和私钥

使用OpenSSL生成自签名SSL/TLS证书和私钥 前提&#xff1a; 系统安装了OpenSSL&#xff1b; 系统&#xff1a;windows、linux都可&#xff1b; 1 生成私钥 创建一个名为 server.key 的私钥文件&#xff0c;并使用 RSA 算法生成一个 2048 位的密钥。 openssl genrsa -out s…

敢问路在何方,路在脚下

运维工程师的出路到底在哪里&#xff1f; 他是谁 运维工程师&#xff08;Operations&#xff09;负责维护并确保整个服务的高可用性&#xff0c;同时不断优化系统架构提升部署效率、优化资源利用率提高整体的ROI。运维工程师面对的最大挑战是大规模集群的管理问题&#xff0c…

List那些坑

很多文章都介绍过这些坑&#xff0c;本文做个记录&#xff0c;并提供解决方案。 1.Arrays.asList的坑 1.1现象 情况1&#xff1a;通过Arrays.asList方法生成的List数据不支持添加操作 使用Arrays.asList方法生成的List数据&#xff0c;不能对其进行删除或者添加操作。代码示例…

学Java的第四天

一、switch语句 switch (表达式) { case 1: 语句体1; break; case 2: 语句体2; break; ... default: 语句体n1; break; } 首先计算表达式的值&#xff0c;然后和case 比较&#xff0c;有对应的值就执行对应的语句&#xff0c;遇到 break 就结束。 最后如果所有的cas…

【MySQL】数据库之存储引擎

目录 一、什么是存储引擎 MySQL 整个查询执行过程&#xff0c;即MySQL的工作原理&#xff1f; 二、MyISAM 与 InnoDB 的区别&#xff1f; 三、如何查看当前表的存储引擎&#xff1f; 1.查看当前的存储引擎 2.查看数据库支持哪些存储引擎 四、如何设置存储引擎&#xff1f;…

如何通过内网穿透实现远程访问本地Linux SVN服务

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

树莓派编译uboot及内核

为了实验ebpf&#xff0c;需要自己编译内核开启相关选项&#xff0c;正好手头有树莓派的板子&#xff0c;所以正好用上。 更换内核 首先我自己用官方工具在sd卡上烧录了64位无桌面的系统&#xff0c;然后按照官方的文档&#xff0c;进行了内核的交叉编译&#xff0c;更换后使…