1:安装插件 导入腾讯云
npm i cos-js-sdk-v5
yarn add cos-js-sdk-v5
// 选择其中一种.如果混用就会导致项目无法跑起来.
// 解决方法.用其中一种再下载一次.然后使用对应的方法打开.项目
2.导入
import Cos from 'cos-js-sdk-v5'
3.实例化
let cos = new Cos({
SecretId: 'xxx', // 身份识别 ID
SecretKey: 'xxx', // 身份密钥
});
1.打开自己的云.在输入框中搜索密钥.然后把对应的添加
4.使用
4:
cos.putObject({
Bucket: '这里时你自定义的账号名拼接数字', /* 存储桶: */
Region: 'ap-guangzhou', /* 存储桶所在地域,必须字段 */
Key: uid+'', /* 必须是字符串 */
StorageClass: 'STANDARD', // 固定值
Body: 文件对象, // 上传文件对象
onProgress: (progressData)=> {
上传进度
console.log(JSON.stringify(progressData));
}
}, (err, data)=> {
// 上传成功或者失败的回调
console.log(err || data);
}); -->
在云中搜索自己的存储桶..在对象存储的存储列表中.
完整代码
<template>
<div>
<!--
el-element图片上传
action:上传地址 必写
name:上传的字段
befor-updata:上传前
on-success;上传成功时
http-request:使用自定义上传 他会让action on-success无效.
-->
<!-- 腾讯云上传使用
1:安装插件
cos-js-sdk-v5 yarn add cos-js-sdk-v5
2:导入
import Cos from 'cos-js-sdk-v5'
3:实例化
let cos = new Cos({
SecretId: 'xxx', // 身份识别 ID
SecretKey: 'COS_SECRETKEY', // 身份密钥
});
4:使用
cos.putObject({
Bucket: 'xxx-xxx', /* 存储桶: */
Region: 'ap-guangzhou', /* 存储桶所在地域,必须字段 */
Key: uid+'', /* 必须是字符串 */
StorageClass: 'STANDARD', // 固定值
Body: 文件对象, // 上传文件对象
onProgress: (progressData)=> {
上传进度
console.log(JSON.stringify(progressData));
}
}, (err, data)=> {
// 上传成功或者失败的回调
console.log(err || data);
}); -->
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:http-request="httprequest"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</div>
</template>
<script>
import Cos from 'cos-js-sdk-v5'
const cos = new Cos({
SecretId: 'xxx', // 身份识别 ID
SecretKey: 'xxx' // 身份密钥
})
export default {
data() {
return {
imageUrl: ''
}
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
},
beforeAvatarUpload(file) {
console.log(file)
// 定义上传图片的大小
const size = file.size / 1024 / 1024 < 1
// 定义上传图片的类型
const type = file.type === 'image/png'
if (!size) {
// 条件不满足时提示信息
this.$message.error('请上传1M的图片')
}
if (!type) {
// 条件不满足时提示信息
this.$message.error('请上传png格式的图片')
}
return size && type
},
// 自定义上传
httprequest(res) {
// 打印获得当前res的值.res.file就等于当前上传的对象
console.log(res, 2121)
cos.putObject({
Bucket: 'qqqzzz123-1308460128', /* 存储桶: */
Region: 'ap-chongqing', /* 存储桶所在地域,必须字段 */
Key: res.file.uid + '', /* 必须是字符串 */
StorageClass: 'STANDARD', // 固定值
Body: res.file, // 上传文件对象
onProgress: (progressData) => {
// 上传进度
console.log(JSON.stringify(progressData))
}
}, (err, data) => {
// 上传成功或者失败的回调
console.log(err || data)
// 默认显示的图片等于上传成功后的图片
this.imageUrl = 'http://' + data.Location
})
}
}
}
</script>
<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>