<template>
<div class="image-upload">
<el-upload
:class="{disable: filelist.length>0}"
action="#"
list-type="picture-card"
:http-request="uploadFn"
:file-list="filelist"
:on-change="onSuccessFn"
:on-remove="removeFn"
>
<i class="el-icon-plus" />
</el-upload>
<el-progress v-show="showProgree" :text-inside="true" :stroke-width="16" :percentage="num" />
</div>
</template>
<script>
import COS from 'cos-js-sdk-v5'
var cos = new COS({
SecretId: 'AKIDEG2YsvhDSEjxvdFfqmRpwmMfjX6OQChv',
SecretKey: 'yh9JCpBG4dx1pMddNq30g4B2dwykGVUD'
})
export default {
data() {
return {
filelist: [
],
num: 0,
showProgree: false
}
},
methods: {
onSuccessFn(response) {
this.showProgree = true
this.filelist.push({
url: response.url,
status: 'ready'
})
},
uploadFn(file) {
console.log(28, file)
const filename = file.file.name.split('.')[0]
cos.putObject({
Bucket: 'hr-project-73-1311279925',
Region: 'ap-guangzhou',
Key: filename,
StorageClass: 'STANDARD',
Body: file.file,
onProgress: (progressData) => {
console.log(JSON.stringify(progressData))
this.num = progressData.percent * 100
}
}, (err, data) => {
if (err) {
return this.$message.error('图片上传失败')
}
this.filelist[0].url = 'https://' + data.Location
this.filelist[0].status = 'success'
this.showProgree = false
})
},
removeFn() {
this.filelist = []
}
}
}
</script>
<style lang="scss">
.image-upload{
position: relative;
display: inline-block;
.disable{
.el-upload--picture-card{
display: none;
}
}
// 进度条样式
.el-progress{
position: absolute;
bottom: 0;
width: 100%;
}
}
</style>