1,先参考文档,了解参数,方法
<template>
<div>
<!--
show-file-list: 是否显示上传的文件列表
action: '#' 用来指定文件要上传的地址,由于我们需要定制上传动作 这里设为#
:http-request:自定义上传行为(重点)
on-success: 上传成功之后的回调
before-upload: 上传之前的检查
-->
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:http-request="upload"
:before-upload="beforeAvatarUpload"
>
<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" class="progress" />
</el-upload>
</div>
</template>
2.先script里定义相关的属性和方法
<script>
// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
SecretId: 'AKIDxjFUS9ZiaBVYKsACxReaEbhW7VdUBftr', // 身份识别ID
SecretKey: 'i9JCszvfEajeMq56tSnunSt53nIZkgNp' // 身份秘钥
})
export default {
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
// value: '',
showProgress: false, // 控制显示隐藏进度条
percent: 0 // 动态绑定进度条
}
},
methods: {
upload(obj) {
console.log('上传的图片数据', obj)
this.showProgress = true
cos.putObject({
Bucket: 'sy132-1307143948', /* 存储桶 */
Region: 'ap-nanjing', /* 存储桶所在地域,必须字段 */
Key: obj.file.name, /* 上传到存储桶之后文件名 */
StorageClass: 'STANDARD', // 上传模式, 标准模式
Body: obj.file, // 上传文件对象
// 省略其他...
onProgress: (progressData) => {
console.log(JSON.stringify(progressData))
this.percent = progressData.percent * 100
}
}, (err, data) => {
// 隐藏进度条
this.showProgress = false
console.log(err || data)
// 上传成功之后
if (data.statusCode === 200) {
// this.imageUrl = `https://${data.Location}`
this.$emit('input', `https://${data.Location}`)
}
})
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
}
}
}
</script>
3,每个回调方法里有参会,会显示相关的数据信息,可以打印出来看一下,如需样式自己手写即可