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实则点击input
this.$refs.iconFile.click()
},
fileChange (e) {
console.log('file change')
let file = e.target.files[0]
//通过后端获取到上传参数
this.$api.aws.s3(data=>{ //接口地址
let accessKeyId = data.accessKeyId
let secretAccessKey = data.secretAccessKey
let objectKey = data.objectKey
let 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 response
console.log('成功');
//成功之后将获取的objectKey值来替换img的路径
this.urlData = objectKey
// console.log(data)
}
});
});
console.log('hello')
},
}
}
</script>