前端实现AWS s3亚马逊云储存上传资源

话不多说，上代码！效果为点击图片上传！不好用你找我

<template><div><div style="width: 102px;height: 102px;border-radius: 50%;border:1px solid #CCC" @click="section()">//动态图片路径<img :src="$aws.url + urlData" style="width: 100px;height: 100px;border-radius: 50%;"/></div><input type="file"  ref="iconFile" @change="fileChange" name="file" style="display: none"/></div>
</template>
<script>import AWS from 'aws-sdk'export default {created () {},data(){return{objectKey:'',urlData:'public/a95c0c550d934fd4b6edfc777670c5e9',}},methods: {section(){//通过refs属性来获取点击事件，点击div实则点击inputthis.$refs.iconFile.click()},fileChange (e) {console.log('file change')let file = e.target.files[0]//通过后端获取到上传参数this.$api.aws.s3(data=>{    //接口地址let accessKeyId = data.accessKeyIdlet secretAccessKey = data.secretAccessKeylet objectKey = data.objectKeylet sessionToken = data.sessionToken;console.log(this.urlData)let s3 = new AWS.S3({'apiVersion' : '2006-03-01','accessKeyId' : accessKeyId,'secretAccessKey' : secretAccessKey,'sessionToken' : sessionToken});let params = {Bucket: 'fudiandmore', /* required */Key: objectKey, /* required */Body: file};s3.putObject(params, (err, data) =>{if (err) {console.log('失败');console.log(err, err.stack) // an error occurred} else {// successful responseconsole.log('成功');//成功之后将获取的objectKey值来替换img的路径this.urlData = objectKey// console.log(data)}});});console.log('hello')},}}
</script>

前端实现AWS s3亚马逊云储存上传资源相关推荐

S3(亚马逊云)工具类及使用【java】
S3(亚马逊云)工具类及使用[java] 文章目录前言 FileServiceImpl AmazonS3Manager S3Config 配置yml maven包 s3配置与使用前言提示:这里是 ...
Springboot 整合常用对象存储工具（asw s3 亚马逊云存储，minio，阿里oss）
1.引入依赖(gradle) // asw s3 亚马逊云存储implementation 'com.amazonaws:aws-java-sdk-s3:1.11.830'// minio clien ...
在亚马逊云科技上搭建静态无服务器 Wordpress，每天仅需 0.01 美元
声明:本文转自 DEV Community 网站,文章翻译由开发者社区提供: 点击下方链接,查看英文原文: https://dev.to/aws-builders/s... 你可能认为这篇文章是标题党 ...
解决方案丨FortiGate NGFW在亚马逊云科技上的五大应用场景
近日,2022年亚马逊云科技中国峰会圆满落幕!峰会指出,云计算已经成为各行各业数字化转型的技术底座.上云的趋势已经从互联网行业拓展到传统行业.全球网络安全领导者.亚马逊云科技的发布合作伙伴(Launc ...
FB接连出事儿？上亿用户记录在亚马逊云服务器上就公之于众了……下滑到第七？领英说苹果怎么就不受雇员欢迎了呢？ | 极客头条...
戳蓝字"CSDN云计算"关注我们哦! 极客头条:速递.最新.绝对有料.这里有企业新动.这里有业界要闻,打起十二分精神,紧跟fashion你可以的! 每周三次,打卡即read 更快. ...
亚马逊html怎么上传,亚马逊帮助: 如何上传“在线试读”文件
如何上传"在线试读"文件亚马逊的"在线试读"项目允许出版商以PDF格式提交图书的电子内容.下列常见问答描述了提交的格式标准和要求. 我需要具备什么条件才能参加 ...
亚马逊MWS开发--上传商品常见错误
一.错误来源不管通过哪种方式上传商品都会出现各种问题,每一类问题亚马逊都有固定的错误码,比如常见5000,8541等,这些错误都会体现在上传的结果报告中 <?xml version=" ...
亚马逊买家秀视频拍摄上传
买家秀也叫关联视频,上传在videos的位置,这个位置有10个坑位,前5个属于这个listing,如果卖家没有自己的买家秀,那么亚马逊将会推荐竞品的买家秀,你从而流失流量和成交关联视频主要有以下几种 ...
Netflix在亚马逊云科技上的应用和创新
Netflix是一家成立于1997年的在线影片租赁提供商,其一开始的主要业务是通过提供超大数量的DVD,然后通过邮寄的方式提供给客户.从2009年开始,Netflix逐渐把她的IT系统迁移到AWS云平 ...
亚马逊云科技上的游戏服务：Lumberyard + Amazon GameLift + Twitch
开发一款世界级的游戏是一个非常困难,耗时和昂贵的过程.现在的游戏玩家要求越来越苛刻,他们希望既可以通过各种不同的终端设备来进行游戏 ,又要求游戏具有社交的功能.由于此类游戏的开发期和推广期都很长,因此 ...

前端实现AWS s3亚马逊云储存上传资源

前端实现AWS s3亚马逊云储存上传资源相关推荐

最新文章

热门文章