Train of thought
demand
The front end takes the initiative to initiate picture uploading by using Tencent cloud uploading interface of three parties. The front end gets a picture address that has been uploaded, and then sends the address as an interface field to our own back-end service
Create a public upload component
Our upload function is based on the secondary development of the Element upload component. We first prepare the elementUI upload component we need and select an appropriate sample code according to our specific business requirements
src/components/UploadImg
<template>
<div>
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:http-request="upload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: ' '}},methods: {
upload(file) {
console.log(file)
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
},
beforeAvatarUpload(file) {
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if(! isPNG) {this.$message.error('Upload profile picture only in PNG format! ')}if(! isLt2M) {this.$message.error('Upload profile picture size cannot exceed 2MB! ')}return isPNG && isLt2M
}
}
}
</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>
Copy the code
Custom upload configuration
Upload action=”#”
Use the custom behavior to override the default upload. Note that once the custom upload behavior is set, all upload operations, such as data processing, will not trigger the on-success hook function after successful upload
<template>
<div>
<! -- show-file-list: indicates whether to display a list of uploaded files. Action: '#' specifies the address to upload files to. Before-upload: check before upload :on-success="handleAvatarSuccess" -->
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:http-request="upload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</div>
</template>
<script>
export default {
methods: {upload(params){
console.log(params)
}
}
}
</script>
Copy the code
Global registration
src/components/index.js
// Globally register components
// omit other....
+ import UploadImg from '@/components/UploadImg'
// 1. Define plugins (extend Vue functionality)
const MyPlugin = {
install(Vue) {
// omit other....
+ Vue.component(UploadImg.name, UploadImg)
}
}
export default MyPlugin
Copy the code
Upload pictures to Tencent Cloud
-
Preparations on the cloud server: Apply for cos server, configure key, and set CORS access
-
Preparation at the code level
(1) Download an officially provided cos service operation package (COS-Js-SDK-V5)
(2) Use its own key to instantiate cos
(3) Specific upload
Install dependencies
npm i cos-js-sdk-v5 --save
Copy the code
Instantiate the cos object
src/components/UploadImg
// The following code is fixed
const COS = require('cos-js-sdk-v5')
// Fill in key and ID (key) in Tencent Cloud COS
const cos = new COS({
SecretId: 'xxx'.// Identity ID
SecretKey: 'xxx' // Identity key
})
Copy the code
Upload using cos object
upload(res) {
if (res.file) {
// Perform the upload operation
cos.putObject({
Bucket: 'xxxxxx'./* Buckets */
Region: 'xxxx'./* Specifies the location of the bucket. */ is a mandatory field
Key: res.file.name, /* File name */
StorageClass: 'STANDARD'.// Upload mode, standard mode
Body: res.file // Upload the file object
}, (err, data) = > {
console.log(err || data)
// Upload successfully
if (data.statusCode === 200) {
this.imageUrl = `https:${data.Location}`}}}})Copy the code