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>

即可引入成功