将照片通过浏览器上传到Amazon S3服务

很多小伙伴一定会头疼如何将图片或者文件上传到亚马逊的s3服务，怎么配置，怎么来写代码？小伙伴肯定遇到过。楼主最近一直在解决这个问题，话不多说，来看一下怎么实现这个功能

直接上demo

<!DOCTYPE html>
<html>
<head>
<title>AWS SDK for JavaScript in the Browser</title>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.224.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
AWS.config.update({

//下面这三个参数需要申请亚马逊账号，然后会有密钥等，技术老大或者后端小哥哥肯定会有，问他要

accessKeyId: '需要后端小哥哥提供',

secretAccessKey: '需要后端小哥哥提供',
Region: '需要后端小哥哥提供'
});

var s3BucketName = '需要后端小哥哥提供';

listObject();

function listObject() {
$("#keys").html("");

var s3 = new AWS.S3({
params: {
Bucket: s3BucketName
}
});

s3.listObjects(function (err, data) {
if (err) {
console.error(err);
throw err;
}
var keys = '存储桶里面的所有对象 Keys:<br />';

$.each(data.Contents, function (index, obj) {
var params = {
Bucket: s3BucketName,
Key: obj.Key
};
keys += (index + '：' + obj.Key + '<br />');
});

$("#keys").html(keys);
});
}

function addObjecto() {
var s3 = new AWS.S3({
params: {
Bucket: s3BucketName
}
});

var key = "test/";
var files = document.getElementById('fileName').files;
if (!files.length) {
return;
}
var file = files[0];
var fileKey = key + file.name;
var params = {Key: fileKey, Body: file, ACL: 'public-read'};
var options = {partSize: 2048 * 1024 * 1024, queueSize: 2, leavePartsOnError: true};

s3.upload(params,options).on('httpUploadProgress', function(evt) {
console.log("Uploaded : " + parseInt((evt.loaded * 100) / evt.total)+'%');
}).send(function(err, data) {
if (err) {
console.log("ERROR UPLOADING" + file.name);
console.log(err);
} else {
var url = s3.getSignedUrl('getObject', {Key: params.Key});
console.log(url)
}
});
}

</script>
</head>
<body>
<div id="keys"></div>
<div style="margin-top: 20px;">
<input type="file" id="fileName" />
<button onclick="addObjecto()">上传</button>
</div>
</body>

</html>

亚马逊账号申请，一般公司会申请的，不要个人申请收费的哦，虽然免费一年

将照片通过浏览器上传到Amazon S3服务

猜你喜欢