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>

猜你喜欢

转载自blog.csdn.net/xr510002594/article/details/82972026