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><inputref="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(); -->