最开始安装了@aws-sdk/client-s3,但是不知道为什么一直报错,所以用了aws-sdk
需要已经搭建好minio、创建好桶
安装插件
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,请设置为true
signatureVersion: "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则为上传成功
})
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>
即可引入成功