<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>
vue上传
最新推荐文章于 2024-08-30 20:29:15 发布