当前位置:网站首页>腾讯云,实现图片上传
腾讯云,实现图片上传
2022-07-05 02:43:00 【13少啊】
在上传图片的时候,没有现在的接口,这个时候可以实现第三方上传,这里介绍一下腾讯云上传图片。
一.配置一个腾讯云
1.注册账号
...直接登录官网。
2.创建一个存储桶
3.创建跨域规则
密钥的作用:
上传文件的时候需要密钥。
二.element-ui上传文件
<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>
重要的参数:
文件上传的方法
上传成功
覆盖默认行为,自定义上传
注意点:
http-request:action失效,和上传成功之后的值也会失效。
三.腾讯云上传使用
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: 'COS_SECRETID', // 身份识别 ID
SecretKey: 'COS_SECRETKEY', // 身份密钥
});
直接搜索密匙获取:
4:使用
cos.putObject({
Bucket: 'XXXXXXXXXXXXXXXXXXX', /* 存储桶: */
Region: 'ap-guangzhou', /* 存储桶所在地域,必须字段 */
Key: uid+'', /* 必须是字符串 */
StorageClass: 'STANDARD', // 固定值
Body: 文件对象, // 上传文件对象
onProgress: (progressData)=> {
// 上传进度
console.log(JSON.stringify(progressData));
}
}, (err, data)=> {
// 上传成功或者失败的回调
console.log(err || data);
});
Bucket:
所在的位置:
Key:
使用文件对象里面的uid
Region:
Region: 'ap-chongqing',
四.实际操作
<template>
<div class="">
<el-upload
class="avatar-uploader"
action="#"
: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"></i>
</el-upload>
</div>
</template>
<script>
import Cos from 'cos-js-sdk-v5'
let cos = new Cos({
SecretId:'xxxxxxxxxxxxxxxxxxxxxxx', // 身份识别 ID
SecretKey:'xxxxxxxxxxxxxxxxx', // 身份密钥
});
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
httpRequest(res){
cos.putObject({
Bucket: 'xxxxxxxxxxxx', /* 存储桶: */
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
});
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isPng=file.type==='image/png'
const limit=file.size/1024/1024<1
if (!isPng) {
alert('请上传png图片')
}
if (!limit) {
alert('请上传1M内图片')
}
return isPng && limit
}
}
}
</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>
图片:
各位看观,持续更新中。
边栏推荐
- [技术发展-26]:新型信息与通信网络的数据安全
- [机缘参悟-38]:鬼谷子-第五飞箝篇 - 警示之一:有一种杀称为“捧杀”
- Summary and practice of knowledge map construction technology
- Azkaban实战
- Design and practice of kubernetes cluster and application monitoring scheme
- Bert fine tuning skills experiment
- How to find hot projects in 2022? Dena community project progress follow-up, there is always a dish for you (1)
- Start the remedial work. Print the contents of the array using the pointer
- Official announcement! The third cloud native programming challenge is officially launched!
- Master Fur
猜你喜欢
Practical case of SQL optimization: speed up your database
【LeetCode】404. Sum of left leaves (2 brushes of wrong questions)
Acwing第 58 场周赛【完结】
Design and implementation of community hospital information system
2021 Li Hongyi machine learning (1): basic concepts
The perfect car for successful people: BMW X7! Superior performance, excellent comfort and safety
"C zero foundation introduction hundred knowledge and hundred cases" (72) multi wave entrustment -- Mom shouted for dinner
Linux安装Redis
Design and implementation of kindergarten management system
Design and implementation of campus epidemic prevention and control system based on SSM
随机推荐
this+闭包+作用域 面试题
Comparison of advantages and disadvantages between platform entry and independent deployment
使用druid連接MySQL數據庫報類型錯誤
GFS distributed file system
2021 Li Hongyi machine learning (1): basic concepts
Application and Optimization Practice of redis in vivo push platform
[200 opencv routines] 99 Modified alpha mean filter
Single line function*
Design and implementation of campus epidemic prevention and control system based on SSM
[Yu Yue education] National Open University spring 2019 0505-22t basic nursing reference questions
Character painting, I use characters to draw a Bing Dwen Dwen
A tab Sina navigation bar
[download white paper] does your customer relationship management (CRM) really "manage" customers?
看 TDengine 社区英雄线上发布会,听 TD Hero 聊开发者传奇故事
Idea inheritance relationship
Introduce reflow & repaint, and how to optimize it?
【LeetCode】106. Construct binary tree from middle order and post order traversal sequence (wrong question 2)
数据库和充值都没有了
The phenomenology of crypto world: Pioneer entropy
Apache Web page security optimization