VUE 使用亚马逊(AWS)上传文件,及跨域配置的问题
1.关于获取accessKeyId,secretAccessKey可参考AWS的S3服务如何获取Access key ID和Secret access key - 程序员大本营2.设置上传跨域的问题找到权限的配置,进入后拉倒底部,设置CORS设置可参考官网文档CORS configuration - Amazon Simple Storage Service设置,我此处设置的是[{"Allowed
·
1.关于获取accessKeyId,secretAccessKey可参考AWS的S3服务如何获取Access key ID和Secret access key - 程序员大本营
2.设置上传跨域的问题
找到权限的配置,进入后拉倒底部,设置CORS设置可参考官网文档CORS configuration - Amazon Simple Storage Service设置,我此处设置的是
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"允许跨域的域名" //如开发环境http://localhost:9527
],
"ExposeHeaders": []
},
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"允许跨域的域名" //如开发环境http://localhost:9527
],
"ExposeHeaders": []
},
{
"AllowedHeaders": [],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
进入正题,上传中的前奏我就不列了,根据自己的需求去编写,我使用的vue+elemnetUI,获取文件流后直接提交亚马逊
// 生成的文件名称
let suffix=".png";
const objName = getFileNameUUID() + suffix
let accessKeyId = "AKIA...."
let secretAccessKey ="ufsSN..."
let s3 = new AWS.S3({
'apiVersion' : '2006-03-01',//版本
'accessKeyId' : accessKeyId,//accessKeyId
'secretAccessKey' : secretAccessKey,//secretAccessKey
'sessionToken' : ""
});
var date=new Date;
var year = date.getFullYear()
var month = date.getMonth() + 1
let params = {
Bucket: 'virtualframer', /* 储存桶名称 */
Key: `frame/originalImage/${year}/${month}/${objName}`, /* 储存地址及文件名 */
Body: option.file//文件流
};
s3.putObject(params, (err, data) =>{
if (err) {
console.log('失败');
console.log('失败',err)
} else {
// successful response
console.log('成功');
}
});
运行~~~~~~~~
AWS上已经可以看到刚刚上传的文件
更多推荐
已为社区贡献1条内容
所有评论(0)