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

查查茶茶丸2023-12-27 13:10

亚马逊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，请设置为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则为上传成功
})

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>

即可引入成功