一、准备工作
在使用腾讯云之前，需要先注册账号，开启对象存储，并且创建储存桶
这些信息在后面的操作中需要用到
示例结果
具体设置配置按照个人需求设置即可。
创建密钥
记住这个密钥配置的地方，容易找不到
密钥配置
二、密钥的使用
固定写法
// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
SecretId: 'xxxx', // 身份识别ID
SecretKey: 'xxxx' // 身份秘钥
})
三、结构搭建，定义事件
<el-upload
class="avatar-uploader"
action="#"
: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-show="showProgress" :percentage="percentage" />
</el-upload>
</div>
定义参数：
显示效果
四、子组件封装
自定义上传操作：
上传到腾讯云
upload(obj) {
// 自定义上传操作 obj.file 用户选中的文件
// 1. 用腾讯云cos 的api把obj.file上传
// 2. 拿到它回传的图片的地址，显示出来
if (!obj.file) {
return
}
console.log('要上传的文件是', obj.file)
this.showProgress = true
// 执行上传操作
cos.putObject({
Bucket: 'sy132-1258898967', /* 存储桶 */
Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
Key: obj.file.name, /* 上传到存储桶之后，叫什么文件名？ */
StorageClass: 'STANDARD', // 上传模式, 标准模式
Body: obj.file, // 上传文件对象
onProgress: (progressData) => {
console.log('上传进度表', JSON.stringify(progressData))
this.percentage = progressData.percent * 100
}
}, (err, data) => {
console.log(err || data)
// 上传成功之后
if (data.statusCode === 200) {
this.$emit('input', `https://${data.Location}`)
// this.imageUrl = `https://${data.Location}`
}
this.showProgress = false
})
},
通过自定义事件input将腾讯云上存储的值传给父组件，，，这里是将v-model拆分成原生方式书写，相当于分别给子组件绑定了value自定义属性以及input自定义事件
上传之前的格式规范:
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
return true
}
五、父组件封装
父组件插入组件，双向绑定用户的头像地址，并且在data，userInfo中补充staffPhoto属性
之后只需在获取用户详情时，给staffPhoto赋值即可，因为v-model是双向绑定
网友评论