aws s3直接通过JavaScript上传文件

在html页面通过js上传文件，直接看代码

<!DOCTYPE html>

<html>

<head>

<title>AWS S3 File Upload</title>

</head>

<body>

<button id="upload-button">Upload</button>

/// <reference types="aws-sdk" />

var credentials = {

accessKeyId: 'xxxxxxxx',

secretAccessKey: 'xxxxxxxxxxxxxx'

}; //秘钥形式的登录上传

AWS.config.update(credentials);

AWS.config.region = 'us-east-1'; //设置区域

// create bucket instance

var bucket = new AWS.S3({params: {Bucket: 'xxxxxxx'}}); //选择桶

var fileChooser = document.getElementById('file-chooser');

var button = document.getElementById('upload-button');

var results = document.getElementById('results');

button.addEventListener('click', function () {

var file = fileChooser.files[0];

if (file) {

results.innerHTML = '';

var params = {Key: file.name, ContentType: file.type, Body: file, 'Access-Control-Allow-Credentials': '*','ACL': 'public-read'}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置

bucket.upload(params, function (err, data) {

console.log(err); //打印出错误

results.innerHTML = err ? 'ERROR!' : 'UPLOADED.';

});

} else {

results.innerHTML = 'Nothing to upload.';

}

}, false);

</script>

</body>

</html>

设置CORS

由于SDK通过Ajax提交数据，需要在S3桶策略中配置跨域提交的CORS. 示例中的*建议在生产环境中改成自己的域名.

<?xml version="1.0" encoding="UTF-8"?>

<AllowedMethod>DELETE</AllowedMethod>

<ExposeHeader>ETag</ExposeHeader> //一定要记得设置，否则分片上传的时候回报错

</CORSRule>

</CORSConfiguration>

参考网址：https://amazonaws-china.com/cn/blogs/china/s3-multipul-upload-practice/

aws s3直接通过JavaScript上传文件相关推荐

php上传照片到s3云服务器,PHP上传文件到AWS S3生成下载文件URL
* 加载s3客户端 * @return string*/ functionAWS_S3Client(){$ACCESS_KEY_ID = '你的s3 ID';$SECRET_ACCESS_KEY = ...
javascript上传文件后台接收
今天在wordpress后台管理的插件管理界面,想添加一个ajax无刷新的上传,然后折腾了一下午,对于一个干前端的来说真心是惭愧呀! 好的,先说一下思路: 上传文件,必需得取得当前的文件的数据流,然后 ...
java websocket 上传大文件,使用java websocket API和Javascript上传文件
我正在学习websocket并且已经使用websocket / json完成了聊天程序.但我坚持上传ATM的文件.任何建议&回答会很感激. 服务器端: package websocket; i ...
浏览器 JavaScript 上传文件笔记
文章目录前言直接发送files[0] 用 FormData 用 new FormData(formElement); 用 new FormData(); , FileInput来自form 用 n ...
aws cli 上传文件到s3命令_使用 AWS CLI 分段上传到 Amazon S3
如何使用 AWS CLI 将文件分段上传到 Amazon S3? 上次更新时间:2020 年 11 月 10 日我想将一个大文件作为多个部分或使用分段上传复制到 Amazon Simple Stor ...
ajax上传文件：ajaxSubmit使用
大多上传文件的时候,都是使用表单的方式进行提交的. 使用form表单上传文件,也有很多种方式: 1.界面上直接使用submit按钮提交.这种方式可以实现效果但是没有success事件.即,可以上传文件 ...
Ubuntu 配置亚马逊 aws cli 上传文件文件夹至亚马逊 AWS S3
当使用亚马逊云服务器进行深度学习模型训练时,需要将数据集上传,相比使用 UI 界面上传,使用命令行方式具有更快的上传速率. 配置步骤安装 aws cli 客户端: pip install awscl ...
javascript构造可以上传文件的form表单（通过js修改enctype）
在上传文件时,我们都知道需要在form表单中加上enctype="multipart/form-data".而在开发过程中,也有可能遇到需要用javascripts构造form表单 ...
解决IE8上传文件时javascript取文件的本地路径的问题C:\fakepath\..
IE8上传文件时javascript读取文件的本地路径的问题("C:\fakepath\")的解决方案前一阵把IE6升级到了IE8,没想到一个网站里面的上传图片时用JavaScr ...

aws s3直接通过JavaScript上传文件

aws s3直接通过JavaScript上传文件相关推荐

最新文章

热门文章