Image upload storage solution

plan	Scenes	Is it mainstream
Store in your company's ordinary server	Simple scene with few pictures	no
Stored in a third-party cloud server	A large number of pictures and videos, etc., and additional functions are required, such as watermark processing, video review, etc. (professional people do professional things) Qiniu Cloud/Tencent Cloud/Alibaba Cloud	yes

The actual resource of the picture will be stored in the third-party cloud server, and our own database will store a valid picture url address 

 

 

4. Tencent cloud cos application configuration

Create a free cloud storage using off-the-shelf Tencent Cloud services

1. Create an account for real-name authentication

Here you need to fill in your real name information, rest assured to write, will not leak

2. Create a bucket

 

 

 

3. Set cors rules

Because we are testing the upload, all uploads are allowed, and the real production environment needs to configure specific domain names and operation methods separately

 

 

4. Key Configuration Instructions

The server is personal and requires certain permissions to upload pictures freely. The person responsible for permission verification is actually the secret key, which means that having the secret key is a necessary condition for uploading

Key configuration

 

 

 

security tips

In actual work, the secret key is sensitive information and cannot be directly stored in the front-end, which is prone to security problems. A better approach is to hand over the secret key to the back-end management. The front-end obtains the secret key by calling the interface first. After having the secret key Then upload

5. Image upload

Select a picture through the upload component and upload the picture to the cloud server The cloud service returns us a valid picture url ->

<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('上传头像图片只能是 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 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

Implement upload and echo

Implement the upload function according to the upload API of cos

Tencent Cloud document address

1- Install the sdk file

npm i cos-js-sdk-v5

2- Introduce Cos and instantiate the cos object

Note: This can only be used as a test to avoid directly exposing the key id in the js code

If the front-end is still leading the upload during actual development, the correct process is as follows:

1. The front-end needs to call a back-end interface of our own in order to obtain a temporary secret key [it will expire in a short time]
2. Pass in the obtained temporary key to instantiate a cos object
3. How to transfer data

// 引入必要的COS模块
const COS = require('cos-js-sdk-v5')
// 实例化对象
const cos = new COS({
  SecretId: 'xxxx', // 身份识别ID
  SecretKey: 'xxxx' // 身份秘钥
})

 

3- Use the cos object to complete the upload

Object Storage Upload Object-SDK Documentation-Documentation Center-Tencent Cloud

 

upload(res) {
  if (res.file) {
    // 执行上传操作
    cos.putObject({
      Bucket: 'xxxxxx', /* 存储桶 */
      Region: 'xxxx', /* 存储桶所在地域，必须字段 */
      Key: res.file.name, /* 文件名 */
      StorageClass: 'STANDARD', // 上传模式, 标准模式
      Body: res.file, // 上传文件对象
      onProgress: (progressData) => {
        console.log(JSON.stringify(progressData))
      }
    }, (err, data) => {
      console.log(err || data)
      // 上传成功之后
      if (data.statusCode === 200) {
        this.imageUrl = `https:${data.Location}`
      }
    })
  }
}