网站设计报价是多少钱,用J2ee怎么做视频网站,wordpress 简介,网站建设策划怎么沟通写一个vue3 上传aws oss存储的案例 使用到的插件
npm install aws-sdk/client-s3
注意事项 #xff1a;
1. 本地调试 #xff0c; 需要设置在官网设置跨域 必须#xff01;#xff01;#xff01; 否则调试不了 #xff0c;前端代理是不起作用的 #xff0c;因为是插…写一个vue3 上传aws oss存储的案例 使用到的插件
npm install aws-sdk/client-s3
注意事项
1. 本地调试 需要设置在官网设置跨域 必须 否则调试不了 前端代理是不起作用的 因为是插件sdk的直接调用 2. 此方法只针对后端懒鬼 直接让前端使用ACCESS_KEY_ID 和AWS_SECRET_ACCESS_KEY 进行直传 正经开发不推荐 友好的谷歌插件 Fileon - S3 Browser 可以直观查看存储桶 封装组件代码示例 UploadImage.vue
templatedivinputreffileInputclassabsolute top-[-10000px] left-[-10000px]typefileidfilenamefileacceptimage/png, image/jpeg, image/gif, image/jpgchangehandleFileChange/!-- button click$refs.fileInput.click()选择文件/button --!-- button clickuploadFile上传文件/button --/div
/templatescript 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 refuploadImageRef file-chosenhandleFileChosen / --!-- 父组件调用示例 选择图片 --
!-- const selectImag () {uploadImageRef.value?.chooseFile();
}; --!--父组件调用示例 图片回传 --
!-- const handleFileChosen (base64Url: any) (checkImage.value base64Url); --!--父组件调用示例 上传文件 --!-- uploadImageRef.value?.uploadFile(); --
