当前位置:网站首页>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 .
边栏推荐
- When the low alcohol race track enters the reshuffle period, how can the new brand break the three major problems?
- this+闭包+作用域 面试题
- PHP cli getting input from user and then dumping into variable possible?
- Tiny series rendering tutorial
- The phenomenology of crypto world: Pioneer entropy
- Structure of ViewModel
- Breaking the information cocoon - my method of actively obtaining information - 3
- Pytorch register_ Hook (operate on gradient grad)
- Which common ports should the server open
- "C zero foundation introduction hundred knowledge and hundred cases" (72) multi wave entrustment -- Mom shouted for dinner
猜你喜欢
单项框 复选框
Pytest (4) - test case execution sequence
Write a thread pool by hand, and take you to learn the implementation principle of ThreadPoolExecutor thread pool
Bumblebee: build, deliver, and run ebpf programs smoothly like silk
【LeetCode】501. Mode in binary search tree (2 wrong questions)
Application and Optimization Practice of redis in vivo push platform
this+闭包+作用域 面试题
TCP security of network security foundation
Master Fur
Elfk deployment
随机推荐
Cut! 39 year old Ali P9, saved 150million
ELK日志分析系统
Spark SQL learning bullet 2
Medusa installation and simple use
Exploration of short text analysis in the field of medical and health (I)
Practical case of SQL optimization: speed up your database
Introduce reflow & repaint, and how to optimize it?
[illumination du destin - 38]: Ghost Valley - chapitre 5 Flying clamp - one of the Warnings: There is a kind of killing called "hold Kill"
Day_ 17 IO stream file class
Azkaban实战
Bumblebee: build, deliver, and run ebpf programs smoothly like silk
Design of kindergarten real-time monitoring and control system
d3js小记
100 basic multiple choice questions of C language (with answers) 04
[source code attached] Intelligent Recommendation System Based on knowledge map -sylvie rabbit
Erreur de type de datagramme MySQL en utilisant Druid
问题解决:AttributeError: ‘NoneType‘ object has no attribute ‘append‘
8. Commodity management - commodity classification
Single line function*
Design and implementation of kindergarten management system