aws s3 存储桶 前端组件上传简单案例

写一个vue3 上传aws oss存储的案例

使用到的插件

npm install @aws-sdk/client-s3

注意事项 ：

1. 本地调试 ， 需要设置在官网设置跨域  必须！！！ 否则调试不了 ，前端代理是不起作用的 ，因为是插件sdk的直接调用

2. 此方法只针对后端懒鬼 直接让前端使用ACCESS_KEY_ID 和AWS_SECRET_ACCESS_KEY 进行直传  正经开发不推荐 

友好的谷歌插件 ：Fileon - S3 Browser   可以直观查看存储桶

封装组件代码示例  UploadImage.vue

<template>
  <div>
    <input
      ref="fileInput"
      class="absolute top-[-10000px] left-[-10000px]"
      type="file"
      id="file"
      name="file"
      accept="image/png, image/jpeg, image/gif, image/jpg"
      @change="handleFileChange"
    />
    <!-- <button @click="$refs.fileInput.click()">选择文件</button> -->
    <!-- <button @click="uploadFile">上传文件</button> -->
  </div>
</template>

<script setup>
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { ref, defineEmits } from "vue";

const s3Client = new S3Client({
  region: "ap-southeast-1",
  credentials: {
    accessKeyId: import.meta.env.VITE_APP_AWS_ACCESS_KEY_ID,
    secretAccessKey: import.meta.env.VITE_APP_AWS_SECRET_ACCESS_KEY,
  },
});

const chooseFile = () => {
  fileInput.value.click();
};

const fileInput = ref(null);
const selectedFile = ref(null);

const handleFileChange = (event) => {
  selectedFile.value = event.target.files[0];
  //将input读取到的File格式的图片文件 转为base64提供访问
  convertFileToUrl(event.target.files[0]);
};
const convertFileToUrl = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    let imageUrl = e.target.result;
    // console.log("imageUrl", imageUrl);
    // 文件读取完成后，将结果发送给父组件
    emit("file-chosen", e.target.result);
  };
  reader.readAsDataURL(file);
};

const uploadFile = async () => {
  console.log("开始上传文件", selectedFile.value, selectedFile.value.name);
  if (!selectedFile.value) return console.log("未选择文件");

  try {
    const bucketName = "hy-bucket11";
    const key = `uploads/${selectedFile.value.name}`;

    const params = {
      Bucket: bucketName,
      Key: key,
      Body: selectedFile.value,
    };

    const command = new PutObjectCommand(params);
    await s3Client.send(command);

    console.log("文件上传成功");

    // 访问地址
    // [$Schema]://[$Bucket].[$Endpoint]/[$Object]
    console.log(
      "https://hy-bucket11.ap-southeast-1.amazonaws.com/uploads/" +
        selectedFile.value.name
    );
  } catch (error) {
    console.error("文件上传失败", error);
  }
};

// 暴露方法给父组件
defineExpose({ chooseFile, uploadFile });
// 调用父组件方法
const emit = defineEmits(["file-chosen"]);
</script>

<!-- 父组件调用示例 导入组件 -->
<!-- <UploadImage ref="uploadImageRef" @file-chosen="handleFileChosen" /> -->

<!-- 父组件调用示例 选择图片 -->
<!-- const selectImag = () => {
  uploadImageRef.value?.chooseFile();
}; -->

<!--父组件调用示例 图片回传 -->
<!-- const handleFileChosen = (base64Url: any) => (checkImage.value = base64Url); -->

<!--父组件调用示例 上传文件 -->

<!-- uploadImageRef.value?.uploadFile(); -->

原文地址：https://blog.csdn.net/qq_30071431/article/details/142494823

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！