vue上传

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <el-upload style="margin-left:50%;transform:translateX(-74px)"
      action="#"
      :http-request="uploadImg"
      :limit='1'
    
  
      :auto-upload="true"
      >
        <span id="text" @click="uploadImg">点击上传封面</span>
  </el-upload>

</div>
  
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import COS from "cos-js-sdk-v5"
import request from "request"
export default {
  name: 'App',
  components: {
    // HelloWorld
  },

  data () {
    return {
      expiredTime: 0,
      expiration: "",
      credentials: {sessionToken:"",tmpSecretId:"",tmpSecretKey:""},
      requestId:"",
      startTime:0
    }
  },
  methods: {
  // 封面上传
  uploadImg () {
  console.log("uploadImg")
  // 创建COS实例  获取签名
  //这里写你们后端提供的请求接口即可
  const res =  this.$http.get('http://127.0.0.1:8000/sts')
    console.log("credentials----");
  // console.log(JSON.parse(res.data.data))
  //这里是因为我们后端返回的是一组JSON字符串，所以进行了一次转化，如果你们直接返回的就是json对象，直接忽略即可
  // const data = JSON.parse(res)
  const data = res;
  console.log("data--",data)
  // var request = require('request');
  // var COS = require('cos-nodejs-sdk-v5');
  var cos = new COS({
    getAuthorization: function (options, callback) {
        // 异步获取临时密钥
        request({
            url: 'http://127.0.0.1:8000/sts',
            data: {
                // 可从 options 取需要的参数
            }
        }, function (err, response, body) {
            try {
                var data = JSON.parse(body);
                var credentials = data.credentials;
            } catch(e) {console.log(11)}
            if (!data || !credentials) return console.error('credentials invalid');
            callback({
                TmpSecretId: credentials.tmpSecretId,        // 临时密钥的 tmpSecretId
                TmpSecretKey: credentials.tmpSecretKey,      // 临时密钥的 tmpSecretKey
                SecurityToken: credentials.sessionToken, // 临时密钥的 sessionToken
                ExpiredTime: data.expiredTime,               // 临时密钥失效时间戳，是申请临时密钥时，时间戳加 durationSeconds
            });
        });
    }
  });
  // 上传图片  其中Bucket 和 Region找你们负责人拿
  //key 在前面加上路径写法可以生成文件夹
  cos.putObject({
    Bucket: 'srcb-test-1304747370', /* 必须 */
    Region: 'ap-shanghai', /* 存储桶所在地域，必须字段 */
    Key: "/excel/"+new Date().getTime() + this.fileName, /* 必须 */
    StorageClass: 'STANDARD',
    Body: this.file, // 上传文件对象
    // onProgress: progressData => {
    // }
  }, (err, data) => {
    // 将上传后的封面进行路径拼接保存到本地
    console.log("after done",err || data)

  })
  }
}
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>