aws s3 上传文件 html,javascript 上传文件到 aws s3存储桶

aws s3 上传文件 html,javascript 上传文件到 aws s3存储桶直接上代码 DocumentUplo varcredentia accessKeyId xxxxxxxxxxxx secretAccess xxxxxxxxxxxx 秘钥形式的登录上传 AWS config update credentials AWS config region xxxxxxxxxxxx 设置区域 create

直接上代码

Document

Upload

///

var credentials = {

accessKeyId: ‘xxxxxxxxxxxxx’,

secretAccessKey: ‘xxxxxxxxxxxxxx’

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

AWS.config.update(credentials);

AWS.config.region = ‘xxxxxxxxxxxx’; //设置区域

// create bucket instance

var bucket = new AWS.S3({ params: { Bucket: ‘xxxxxxxxx’ } }); //选择桶

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最好要设置

console.log(params)

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

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

results.innerHTML = err ? ‘ERROR!’ : ‘UPLOADED.’;

});

} else {

results.innerHTML = ‘Nothing to upload.’;

}

}, false);

2.需要在aws s3中的cors进行配置如下图

24dc2def8e5bf2ee2b0594970ebc6841.png

附代码

*

GET

PUT

POST

DELETE

ETag

*

如果出现 TypeError: m.upload.addEventListener is not a function

查看是否在文件中引入mock把它去掉就ok了

来源:https://www.cnblogs.com/lyjfight/p/12942829.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/225828.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 上午8:27
下一篇 2026年3月17日 上午8:27


相关推荐

  • 解决VS2008在win7找不到输入序列号的地方

    解决VS2008在win7找不到输入序列号的地方VS2008在Windows7打开维护界面看不到可以输序列号的地方。因为微软把他隐藏了。我们可以借用工具把他显示出来:下载地址:http://www.zlsoft.com/techbbs/UploadFile/2010-7/2010716148883786.rar使用方法:打开工具,填入你的找到序列号,点击开启,打开控制面板,调出VS2008的维护界面,点击下一步

    2022年8月10日
    11
  • Layui 弹出层插件

    Layui 弹出层插件Layui弹出层插件开发工具与关键技术:VisualStudio2015–Layui作者:廖亚星撰写时间:2019年6月4日这段时间在做项目页面的搭建,在页面的操作中,会出现很多的弹出层,这能使用户在一个页面中执行更多的操作,而我的项目里面用的弹出层是Layui里面的弹出层插件。Layui的弹出层插件可以作为独立组件使用,也可以Layui模块化使用基本参数:type—…

    2022年6月13日
    71
  • 小米6X 解BL锁教程 申请BootLoader解锁教程[通俗易懂]

    小米6X 解BL锁教程 申请BootLoader解锁教程[通俗易懂]小米6X线刷兼救砖_解账户锁_纯净刷机包_教程一、准备工作1、注册小米账号:点击注册(已有小米账号请忽视)2、在手机中登陆【小米账号】3、下载并解压【小米解锁工具】或点击这里下载安装二、开始解锁1打开【小米解锁官网】:http://www.miui.com/unlock/,点击【立即解锁】,输入【小米账号】,点击【立即登录】,填写好上诉信息后,点击【立即申请】,输入【短…

    2022年5月18日
    62
  • 关闭系统还原清理垃圾文件

    关闭系统还原清理垃圾文件nbsp 今天又有两个任务 1 关闭系统还原 2 清理系统还原留下的垃圾文件 鼠标右键单击我的电脑 属性 系统还原勾选 在所有驱动器上关闭系统还原 单击应用按钮 如图 1 图 1 接下来我们一起来清理系统还原留下的垃圾文件 首先我们要说的是 Windowsxp 系统还原的实现原理 如果你设置了显示隐藏的系统文件 那么你将会发现系统每个磁盘分区下都有一个叫做 SystemVolum

    2026年3月16日
    2
  • linux下mysql怎么备份_Linux下如何进行MySQL数据库备份和导入

    linux下mysql怎么备份_Linux下如何进行MySQL数据库备份和导入1),数据库的备份1.导出整个数据库mysqldump-u用户名-p数据库名>导出的文件名例:mysqldump-udbadmin-pmyblog>/home/zhangy/blog/database_bak/myblog.sql2.导出一个表mysqldump-u用户名-p数据库名表名>导出的文件名例:mysqldump-udbadmin…

    2022年5月27日
    37
  • office 2007 官方版

    office 2007 官方版ftp://159.226.150.94/f:/myftpsite/software/microsoft%20office%202003%D3%A2%CE%C4%D5%FD%CA%BD%B0%E65cd%BA%CF1/OFFICE11.ISO正版的office2007pro没序列号需要的帮忙找找序列号~ 转载于:https://blog.51cto.com…

    2022年7月19日
    19

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号