当前位置:网站首页>Tencent cloud, realize image upload
Tencent cloud, realize image upload
2022-07-05 02:45:00 【13 less】
When uploading pictures , There is no current interface , At this time, third-party uploading can be realized , Here is an introduction to the pictures uploaded by Tencent cloud .
One . Configure a Tencent cloud
1. Registered account
... Log in to the official website directly .
2. Create a bucket
3. Create cross domain rules
The function of the key :
You need a key when uploading files .
Two .element-ui Upload files
<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>
Important parameters :
How to upload files
Upload successful
Override default behavior , Custom upload
Be careful :
http-request:action invalid , And the value after successful upload will also be invalid .
3、 ... and . Tencent cloud upload
1. Installing a plug-in
cos-js-sdk-v5 yarn add cos-js-sdk-v5
2: Import
import Cos from 'cos-js-sdk-v5'
3: Instantiation
let cos = new Cos({
SecretId: 'COS_SECRETID', // Identity recognition ID
SecretKey: 'COS_SECRETKEY', // Identity key
});
Search the key directly to get :
4: Use
cos.putObject({
Bucket: 'XXXXXXXXXXXXXXXXXXX', /* bucket : */
Region: 'ap-guangzhou', /* The area where the bucket is located , Required fields */
Key: uid+'', /* Must be a string */
StorageClass: 'STANDARD', // Fixed value
Body: File object , // Upload file object
onProgress: (progressData)=> {
// Upload progress
console.log(JSON.stringify(progressData));
}
}, (err, data)=> {
// Callback for upload success or failure
console.log(err || data);
});
Bucket:
Where it is :
Key:
Use the uid
Region:
Region: 'ap-chongqing',
Four . Actual operation
<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', // Identity recognition ID
SecretKey:'xxxxxxxxxxxxxxxxx', // Identity key
});
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
httpRequest(res){
cos.putObject({
Bucket: 'xxxxxxxxxxxx', /* bucket : */
Region: 'ap-chongqing', /* The area where the bucket is located , Required fields */
Key: res.file.uid+'', /* Must be a string */
StorageClass: 'STANDARD', // Fixed value
Body:res.file, // Upload file object
onProgress: (progressData)=> {
// Upload progress
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(' Please upload png picture ')
}
if (!limit) {
alert(' Please upload 1M Inside picture ')
}
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>
picture :
Look, everyone , Ongoing update .
边栏推荐
- Medusa installation and simple use
- When to catch an exception and when to throw an exception- When to catch the Exception vs When to throw the Exceptions?
- Avoid material "minefields"! Play with super high conversion rate
- Exploration of short text analysis in the field of medical and health (II)
- Character painting, I use characters to draw a Bing Dwen Dwen
- The most powerful new household god card of Bank of communications. Apply to earn 2100 yuan. Hurry up if you haven't applied!
- 【LeetCode】106. Construct binary tree from middle order and post order traversal sequence (wrong question 2)
- The perfect car for successful people: BMW X7! Superior performance, excellent comfort and safety
- spoon插入更新oracle数据库,插了一部分提示报错Assertion botch: negative time
- Linux安装Redis
猜你喜欢
The perfect car for successful people: BMW X7! Superior performance, excellent comfort and safety
2.常见的请求方法
问题解决:AttributeError: ‘NoneType‘ object has no attribute ‘append‘
Acwing game 58 [End]
TCP security of network security foundation
看 TDengine 社区英雄线上发布会,听 TD Hero 聊开发者传奇故事
Design of kindergarten real-time monitoring and control system
Devtools的简单使用
[technology development-26]: data security of new information and communication networks
Design and implementation of high availability website architecture
随机推荐
Azkaban实战
ASP. Net core 6 framework unveiling example demonstration [01]: initial programming experience
问题解决:AttributeError: ‘NoneType‘ object has no attribute ‘append‘
Azkaban安装部署
Using druid to connect to MySQL database reports the wrong type
1.五层网络模型
Talk about the things that must be paid attention to when interviewing programmers
Sqoop安装
[source code attached] Intelligent Recommendation System Based on knowledge map -sylvie rabbit
Elfk deployment
Medusa installation and simple use
Scientific research: are women better than men?
Learn game model 3D characters, come out to find a job?
Why do you understand a16z? Those who prefer Web3.0 Privacy Infrastructure: nym
Elk log analysis system
Start the remedial work. Print the contents of the array using the pointer
GFS分布式文件系统
The most powerful new household god card of Bank of communications. Apply to earn 2100 yuan. Hurry up if you haven't applied!
Apache Web page security optimization
Bumblebee: build, deliver, and run ebpf programs smoothly like silk