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

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


使用到的插件

1. npm install @aws-sdk/client-s3

复制代码

注意事项 ：

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

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


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


封装组件代码示例  UploadImage.vue

1. <template>
2.   <div>
3.     <input
4.       ref="fileInput"
5.       class="absolute top-[-10000px] left-[-10000px]"
6.       type="file"
7.       id="file"
8.       name="file"
9.       accept="image/png, image/jpeg, image/gif, image/jpg"
10.       @change="handleFileChange"
11.     />
12.     <!-- <button @click="$refs.fileInput.click()">选择文件</button> -->
13.     <!-- <button @click="uploadFile">上传文件</button> -->
14.   </div>
15. </template>
17. <script setup>
18. import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
19. import { ref, defineEmits } from "vue";
21. const s3Client = new S3Client({
22.   region: "ap-southeast-1",
23.   credentials: {
24.     accessKeyId: import.meta.env.VITE_APP_AWS_ACCESS_KEY_ID,
25.     secretAccessKey: import.meta.env.VITE_APP_AWS_SECRET_ACCESS_KEY,
26.   },
27. });
29. const chooseFile = () => {
30.   fileInput.value.click();
31. };
33. const fileInput = ref(null);
34. const selectedFile = ref(null);
36. const handleFileChange = (event) => {
37.   selectedFile.value = event.target.files[0];
38.   //将input读取到的File格式的图片文件 转为base64提供访问
39.   convertFileToUrl(event.target.files[0]);
40. };
41. const convertFileToUrl = (file) => {
42.   const reader = new FileReader();
43.   reader.onload = (e) => {
44.     let imageUrl = e.target.result;
45.     // console.log("imageUrl", imageUrl);
46.     // 文件读取完成后，将结果发送给父组件
47.     emit("file-chosen", e.target.result);
48.   };
49.   reader.readAsDataURL(file);
50. };
52. const uploadFile = async () => {
53.   console.log("开始上传文件", selectedFile.value, selectedFile.value.name);
54.   if (!selectedFile.value) return console.log("未选择文件");
56.   try {
57.     const bucketName = "hy-bucket11";
58.     const key = `uploads/${selectedFile.value.name}`;
60.     const params = {
61.       Bucket: bucketName,
62.       Key: key,
63.       Body: selectedFile.value,
64.     };
66.     const command = new PutObjectCommand(params);
67.     await s3Client.send(command);
69.     console.log("文件上传成功");
71.     // 访问地址
72.     // [$Schema]://[$Bucket].[$Endpoint]/[$Object]
73.     console.log(
74.       "https://hy-bucket11.ap-southeast-1.amazonaws.com/uploads/" +
75.         selectedFile.value.name
76.     );
77.   } catch (error) {
78.     console.error("文件上传失败", error);
79.   }
80. };
82. // 暴露方法给父组件
83. defineExpose({ chooseFile, uploadFile });
84. // 调用父组件方法
85. const emit = defineEmits(["file-chosen"]);
86. </script>
88. <!-- 父组件调用示例 导入组件 -->
89. <!-- <UploadImage ref="uploadImageRef" @file-chosen="handleFileChosen" /> -->
91. <!-- 父组件调用示例 选择图片 -->
92. <!-- const selectImag = () => {
93.   uploadImageRef.value?.chooseFile();
94. }; -->
96. <!--父组件调用示例 图片回传 -->
97. <!-- const handleFileChosen = (base64Url: any) => (checkImage.value = base64Url); -->
99. <!--父组件调用示例 上传文件 -->
101. <!-- uploadImageRef.value?.uploadFile(); -->

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。