当前位置: 首页 > news >正文

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>

即可引入成功

相关文章:

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

亚马逊s3 API文档 最开始安装了aws-sdk/client-s3&#xff0c;但是不知道为什么一直报错&#xff0c;所以用了aws-sdk 准备工作&#xff1a; 需要已经搭建好minio、创建好桶 1. vue2 安装插件 yarn add aws-sdk s3配置 var AWS require("aws-sdk"); AWS.co…...

宏集应用 | 如何通过振动传感器防止造纸工业中的意外故障?

来源&#xff1a;宏集科技 工业物联网 宏集应用 | 如何通过振动传感器防止造纸工业中的意外故障&#xff1f; 原文链接&#xff1a;https://mp.weixin.qq.com/s/Z2qSdJnPLdOxJuG5qz-JJA 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; 一 应用背景 在造纸工业中&…...

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

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

如何搭建一个高效的Python开发环境

“工欲善其事&#xff0c;必先利其器”&#xff0c;这里我们来搭建一套高效的 Python 开发环境&#xff0c;为后续的数据分析做准备。 关于高效作业&#xff0c;对于需要编写 Python 代码进行数据分析的工作而言&#xff0c;主要涉及两个方面。 1. 一款具备强大的自动完成和错…...

Reactor 和 Proactor模式,IO复用与epoll、同步IO,异步IO与协程

汽车软件中的CPU密集与IO密集任务 在汽车软件中&#xff0c;涉及到ADAS的长期占用CPU的计算任务可以算的上是CPU密集型。 另外的&#xff0c;众多SOA原子服务或者各种数据收集、处理、分发、log系统&#xff0c;应该算是IO密集型任务。 寻求一些手段优化IO性能的原因 在过去…...

nginx反向代理服务器及负载均衡服务配置

一、正向代理与反向代理 正向代理&#xff1a;是一个位于客户端和原始服务器(oricin server)之间的服务器&#xff0c;为了从原始服务器取得内容&#xff0c;客户端向代理发送一个请求并指定目标(原始服务器)&#xff0c;然后代理向原始服务器转交请求并将获得的内容返回给客户…...

【Log4j2】Log4j2最佳实践:Log4j2配置超过7天压缩,超过3个月删除文件的滚动日志,分别定义info文件和error文件,按照每小时存储

目录 Log4j2配置 springboot多环境日志配置 参考资料 Log4j2配置 如果你想要在控制台输出美化的日志信息&#xff0c;你可以使用Log4j2的ConsoleAppender和AnsiColorConverter来实现。下面是相应的配置示例&#xff1a; <Configuration status"WARN"><…...

windows和Linux如何做强制域名解析

首先我们了解两个问题&#xff1a; 一、域名解析是什么&#xff1f; 域名解析是让我们可以通过网站的域名来找到它对应的IP地址&#xff0c;以便更加方便的访问我们所需访问的网站的一种服务。 它通过DNS服务器来进行&#xff0c;我们输入所想要访问的域名&#xff0c;将会通过…...

5G NTN:通信新天地,卫星通信的奇妙探索

导言 嗨&#xff0c;大家好&#xff01;今天我们要深入了解一项让通信更强大的技术——5G NTN。它和卫星通信结合在一起&#xff0c;为我们带来了通信的新时代。在这篇文章中&#xff0c;我们将用白话文揭示5G NTN和卫星通信的关系&#xff0c;探索这个通信世界的奇妙之旅。 5…...

RabbitMQ的基础使用

/*** 使用rabbitMQ* 1.引用amqp场景 RabbitAutoConfiguration就会自动生效* 2.给容器中自动配置了各种api RabbitTemplate AmqpAdmin CachingConnectionFactory RabbitMessagingTemplate* 所有属性都是 spring.rabbitmq开头* 3.通过注解EnableRabbit使用* 4.监听消息 使用Rabbi…...

使用Uniapp随手记录知识点

使用uniapp随手记录知识点 1 组件内置组件扩展组件 2 vuex状态管理使用流程mapState 辅助函数gettersMutation 1 组件 内置组件 内置组件内主要包含一些基础的view button video scroll-view等内置基础组件&#xff0c;满足基础场景 扩展组件 扩展组件是uniapp封装了一些成…...

Fiber Node的数据结构,以及如何在Reconciliation阶段被使用。

首先&#xff0c;Fiber Node是React用来描述组件树的数据结构&#xff0c;每一个React组件都对应一个Fiber Node。下面是一个Fiber Node的基本结构&#xff1a; const fiber {// 标识这个Fiber Node的类型&#xff08;函数组件&#xff0c;类组件&#xff0c;DOM节点类型等&a…...

Spring Cloud Alibaba 之 Sentinel

大家好&#xff0c;我是升仔 引言 在微服务架构中&#xff0c;服务之间的依赖错综复杂。一旦某个服务出现问题&#xff0c;很容易引发连锁反应&#xff0c;导致整个系统瘫痪。Sentinel 就是为了解决这类问题而生的。它通过流量控制、熔断降级等机制&#xff0c;保护服务不被过多…...

Jenkins Tutorial

什么是Jenkins Jenkins是一个自动化平台&#xff0c;它允许你使用pipelines去部署应用。它也可以自动化其他任务。 BUILDTESTDEPLOYMENT Jenkins 架构 首先&#xff0c;你拥有一个Master Server&#xff0c;它控制pipelines和安排Build到你的Agent上&#xff1b; 其次&…...

css mask 案例

文章目录 一、基本用法二、图案遮罩二、文字阴影效果三、日历探照灯效果 CSS的mask属性用于定义一个可重复使用的遮罩&#xff0c;可以将其应用到任何可视元素上。这个功能类似于Photoshop中的图层蒙版。通过mask属性&#xff0c;可以创建独特的效果&#xff0c;比如圆形、渐变…...

案例系列:Movielens_预测用户对电影的评分_基于行为序列Transformer的推荐系统

文章目录 简介数据集设置准备数据下载并准备数据框将电影评分数据转换为序列 定义元数据为训练和评估创建 tf.data.Dataset创建模型输入编码输入特征创建一个二叉搜索树模型运行训练和评估实验结论 描述&#xff1a; 使用行为序列Transformer&#xff08;BST&#xff09;模型在…...

单词接龙[中等]

一、题目 字典wordList中从单词beginWord和endWord的 转换序列 是一个按下述规格形成的序列beginWord -> s1 -> s2 -> ... -> sk&#xff1a; 1、每一对相邻的单词只差一个字母。 2、对于1 < i < k时&#xff0c;每个si都在wordList中。注意&#xff0c;beg…...

机器人制作开源方案 | 森林管理员

​作者&#xff1a;李佳骏、常睿康、张智斌、李世斌、高华耸 单位&#xff1a;山西能源学院 指导老师&#xff1a;赵浩成、郜敏 1. 研究背景 森林作为地球上可再生自然资源及陆地生态的主体&#xff0c;在人类生存和发展的历史中起着不可代替的作用&#xff0c;它不仅能提供…...

Laravel框架使用phpstudy本地安装的composer用Laravel 安装器进行安装搭建

一、首先需要安装Laravel 安装器 composer global require laravel/installer 二、安装器安装好后&#xff0c;可以使用如下命令创建项目 laravel new sys 三、本地运行 php artisan serve 四、 使用Composer快速安装Laravel5.8框架 安装指定版本的最新版本&#xff08;推荐&a…...

炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】

一&#xff1a;源码获取 这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面&#xff0c;这里我将源码资源分享给大家&#xff0c;大家可以直接免费下载使用哦&#xff0c;没有 vip 的小伙伴找我私聊发送"登录注册"即可我给你发文件&#xff0c;此登录注…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

HTTPS证书一年多少钱?

HTTPS证书作为保障网站数据传输安全的重要工具&#xff0c;成为众多网站运营者的必备选择。然而&#xff0c;面对市场上种类繁多的HTTPS证书&#xff0c;其一年费用究竟是多少&#xff0c;又受哪些因素影响呢&#xff1f; 首先&#xff0c;HTTPS证书通常在PinTrust这样的专业平…...

高效的后台管理系统——可进行二次开发

随着互联网技术的迅猛发展&#xff0c;企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心&#xff0c;成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为 若依后台管理框架 的系统&#xff0c;它不仅支持跨平台应用&#xff0c;还能提供丰富…...

VSCode 使用CMake 构建 Qt 5 窗口程序

首先,目录结构如下图: 运行效果: cmake -B build cmake --build build 运行: windeployqt.exe F:\testQt5\build\Debug\app.exe main.cpp #include "mainwindow.h"#include <QAppli...

OPENCV图形计算面积、弧长API讲解(1)

一.OPENCV图形面积、弧长计算的API介绍 之前我们已经把图形轮廓的检测、画框等功能讲解了一遍。那今天我们主要结合轮廓检测的API去计算图形的面积&#xff0c;这些面积可以是矩形、圆形等等。图形面积计算和弧长计算常用于车辆识别、桥梁识别等重要功能&#xff0c;常用的API…...

【Java】Ajax 技术详解

文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤:1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现:客户端实现:4. Axi…...

更新 Docker 容器中的某一个文件

&#x1f504; 如何更新 Docker 容器中的某一个文件 以下是几种在 Docker 中更新单个文件的常用方法&#xff0c;适用于不同场景。 ✅ 方法一&#xff1a;使用 docker cp 拷贝文件到容器中&#xff08;最简单&#xff09; &#x1f9f0; 命令格式&#xff1a; docker cp <…...