1.封装UploadImg组件
1.1下载依赖包
npm i cos-js-sdk-v5 --save
1.2 封装一个具有上传功能的组件
我这里结合element-ui中的 <el-upload>来进行封装的(官网cv)
-
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"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<style>
.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>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
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>
我们通过上传前的函数就可以判断用户上传的类型 这里面会自动传入一个参数 这个参数代表当前上传的信息对象 打印了file
2.全局注册组件
import UploadImg from './UploadImg'
export default {
install(p) {
p.component(UploadImg.name, UploadImg)
}
}
3.实例化cos
在封装的UploadImg组件中实例化cos 这是固定写法 需要分别传入腾讯云中的身份识别id和密钥
<script>
// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
SecretId: 'xxx', // 身份识别ID
SecretKey: 'xxx' // 身份秘钥
})
如何寻找密钥?请看下图
云产品=>访问管理=>api密钥管理 在代码楚填入对应的密钥
4.核心代码
可以重新声明一个方法 也可以直接在上传之前的函数里面进行业务逻辑
if (file) {
// 执行上传操作
cos.putObject({
Bucket: 'xxx', /* 存储桶 */
Region: 'xxx', /* 存储桶所在地域,必须字段 */
Key: file.name, /* 文件名 */
StorageClass: 'STANDARD', // 上传模式, 标准模式
Body: file // 上传文件对象
}, (err, data) => {
console.log(err || data)
// 上传成功之后
if (data.statusCode === 200) {
// console.log(data)
this.$emit('input', 'https://' + data.Location)
// this.imageUrl = `https:${data.Location}`
}
})
}
5.无法显示图片修复
上传成功后腾讯云给我们返回的是这样一个字符串
6.v-modle双向绑定
这里如果我要显示图片 那就可以使用v-modle 在子组件标签身上定义v-modle相当于像子组件传入了一个value 属性 子组件上传成功后 利用this.$emit('input')触发input事件将腾讯云返回的图片地址进行传递过去 就会造成子组件更新
子组件的标签上
<UploadImg v-model="imgUrl" />
子组件上传成功后
this.$emit('input', 'https://' + data.Location)
7.完整代码
7.1 UploadImg组件
<template>
<!--
show-file-list: 是否显示上传的文件列表
action: '#' 用来指定文件要上传的地址,由于我们需要定制上传动作
这里设为#
:http-request:自定义上传行为(重点)
on-success: 上传成功之后的回调
before-upload: 上传之前的检查
:on-success="handleAvatarSuccess"
-->
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="value" :src="value" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</template>
<style>
.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>
<script>
// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
SecretId: 'xxx', // 身份识别ID
SecretKey: 'xxx' // 身份秘钥
})
export default {
name: 'UploadImg',
props: {
value: {
type: String,
required: true
}
},
data() {
return {
}
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
},
beforeAvatarUpload(file) {
console.log(file)
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
return this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
return this.$message.error('上传头像图片大小不能超过 2MB!')
}
this.upload(file)
},
upload(file) {
if (file) {
// 执行上传操作
cos.putObject({
Bucket: 'wh66-xxx', /* 存储桶 */
Region: 'ap-xxx', /* 存储桶所在地域,必须字段 */
Key: file.name, /* 文件名 */
StorageClass: 'STANDARD', // 上传模式, 标准模式
Body: file // 上传文件对象
}, (err, data) => {
console.log(err || data)
// 上传成功之后
if (data.statusCode === 200) {
// console.log(data)
this.$emit('input', 'https://' + data.Location)
// this.imageUrl = `https:${data.Location}`
}
})
}
}
}
}
</script>
7.2 父组件使用
<UploadImg v-model="userInfo.staffPhoto" /></el-form-item>