Tencent Cloud COS application configuration
Register an account and authenticate with your real name
cloud.tencent.com/
Enabling Object Storage
Creating a Storage Bucket
Set the CORS rule
Since we are testing uploads, all uploads are allowed
Configure the cloud API key
If you can’t find it, search here
Packaging components
1 Basic Ideas
2 Encapsulation (complete code)
Upload Tencent cloud installation dependency
npm i cos-js-sdk-v5 --save
Copy the code
<template>
<div>
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:http-request="upload"
>
<img v-if="value" :src="value" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
<el-progress v-if="showProgress" :percentage="percent" />
</el-upload>
</div>
</template>
<script>
const COS = require('cos-js-sdk-v5')
// Fill in key and ID (key) in Tencent Cloud COS
const cos = new COS({
SecretId: 'xxx'.// Identity ID
SecretKey: 'xxx' // Identity key
})
export default {
name: 'UploadImg'.props: {
// The value of the V-model passed from the parent component
value: { type: String.default: ' '}},data() {
return {
imageUrl: ' '.percent: 0.showProgress: false}},methods: {
upload(res) {
if (res.file) {
this.showProgress = true
// Perform the upload operation
cos.putObject({
Bucket: 'xxx'./* Buckets */
Region: 'xxx'./* Specifies the location of the bucket. */ is a mandatory field
Key: res.file.name, /* File name */
StorageClass: 'STANDARD'.// Upload mode, standard mode
Body: res.file, // Upload the file object
onProgress: (progressData) = > {
this.percent = progressData.percent * 100}},(err, data) = > {
this.showProgress = false
console.log(err || data)
// Upload successfully
if (data.statusCode === 200) {
this.imageUrl = `https:${data.Location}`
this.$emit('input'.this.imageUrl)
}
})
}
}
}
}
</script>
<style>
.progress {
position: absolute;
display: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
</style>
Copy the code
3 Local Code
Global registration
.import UploadImg from './UploadImg'
export default {
install(Vue){... Vue.component('UploadImg', UploadImg)
}
}
Copy the code
Instantiate the cos object
const COS = require('cos-js-sdk-v5')
// Fill in key and ID (key) in Tencent Cloud COS
const cos = new COS({
SecretId: 'xxx'.// Identity ID
SecretKey: 'xxx' // Identity key
})
Copy the code
Upload using cos object
upload(res) {
if (res.file) {
this.showProgress = true
// Perform the upload operation
cos.putObject({
Bucket: 'xxx'./* Buckets */
Region: 'xxx'./* Specifies the location of the bucket. */ is a mandatory field
Key: res.file.name, /* File name */
StorageClass: 'STANDARD'.// Upload mode, standard mode
Body: res.file, // Upload the file object
onProgress: (progressData) = > {
this.percent = progressData.percent * 100}},(err, data) = > {
this.showProgress = false
console.log(err || data)
// Upload successfully
if (data.statusCode === 200) {
this.imageUrl = `https:${data.Location}`
this.$emit('input'.this.imageUrl)
}
})
}
}
Copy the code
The progress bar
<el-upload
...
+ <el-progress v-if="showProgress" :percentage="percent" />
</el-upload>
<style>..progress {
position: absolute;
display: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
}
</style>
// Add data item
data () {
return {
// ...
percent: 0.showProgress: false}}// Update the value of the data item
upload(params) {
if (params.file) {
// Displays a progress bar
+ this.showProgress = true
// Perform the upload operation
cos.putObject({
Bucket: 'xxx'./* Buckets */
Region: 'xxx'./* Specifies the location of the bucket. */ is a mandatory field
Key: params.file.name, /* File name */
StorageClass: 'STANDARD'.// Upload mode, standard mode
Body: params.file, // Upload the file object
onProgress: (progressData) = > {
console.log(JSON.stringify(progressData))
+ this.percent = progressData.percent * 100}},(err, data) = > {
// Hide the progress bar
+ this.showProgress = false. }}}})Copy the code
4 Component Usage
<el-form-item label="Employee profile picture">
<UploadImg v-model="userInfo.staffPhoto" />
</el-form-item>
Copy the code