【Node】腾讯云OSS存储上传图片

目录

准备工作

后端Koa

前端Vue

建议

---

准备工作

购买腾讯云OSS存储后需要获得以下几个变量

SecretId：秘钥id

SecretKey：秘钥

Bucket：存储桶名称 可在腾讯云的图像界面创建存储桶

Region：购买时选择的区域 我这里是南京

prefix：可选 腾讯云中自定义的文件夹名称 我这里是indexImages

const SecretId = "AK**********Od" // 秘钥id
const SecretKey = "zi**********Am" // 秘钥
const Bucket = "b**********9" // 存储桶名称 可在腾讯云的图像界面创建
const Region = "ap-nanjing" // 购买时选择的区域 我这里是南京
const prefix = "indexImages/" // 可选 腾讯云中自定义的文件夹名称 我这里是indexImages

后端项目中下载依赖cos-nodejs-sdk-v5

npm install cos-nodejs-sdk-v5 --save

后端Koa

/router/infoManage.router.js

路由

const Router = require("koa-router")
const { uploadImage } = require("../controller/infoManage.controller")

const infoManageRouter = new Router()

infoManageRouter.post("/indeximages/uploadImages", uploadImage)

module.exports = infoManageRouter

/controller/infoManage.controller.js

控制层

const infoManageService = require("../service/infoManage.service")
const COS = require("cos-nodejs-sdk-v5")
const { SecretId, SecretKey, Bucket, Region, prefix } = require("../app/config")

const cos = new COS({
  SecretId,
  SecretKey
})

class InfoManageController {
  // 上传图像
  async uploadImage(ctx) {
    try {
      const { base64Code, picType } = ctx.request.body // 获取前端传来的base64编码和图片后缀 如png
      const dataBuffer = Buffer.from(base64Code, "base64") // base64 -> 二进制Buffer
      const data = await cos.putObject({
        Bucket, // 存储桶名称
        Region, // 存储桶所在地域
        Key: prefix + new Date().getTime() + `.${picType}`, // 可以理解为图片存储的路径+名称(唯一) 例如：indexImages/1670050961361.png
        Body: dataBuffer, // 上传文件的内容，可以为 FileStream、字符串、Buffer, 我们这里接收二进制Buffer
        onProgress: function (progressData) {
          console.log(progressData)
        }
      })

      const imageUrl = `https://${data.Location}`
      console.log("上传图片的url为", imageUrl)
      await infoManageService.uploadImage(imageUrl) // 把图片url插入到数据库中
      ctx.body = {
        code: 200,
        message: imageUrl
      }
    } catch (error) {
      console.log(error)
    }
  }
}

module.exports = new InfoManageController()

/service/infoManage.service.js

sql

const connection = require("../app/database")
const dateFormat = require("../utils/date-handle")

class InfoManageService {
  // 上传图片
  async uploadImage(imageUrl) {
    const statement = `INSERT INTO indeximages(imageUrl) VALUES(?)`
    await connection.execute(statement, [imageUrl])
    return true
  }
}

module.exports = new InfoManageService()

前端Vue

<template>
  <div id="poster-manage">
    <input
      @change="uploadPhoto($event)"
      type="file"
      accept="image/gif,image/jpeg,image/jpg,image/png"
    />
  </div>
</template>

<script>
import axios from "axios"

export default {
  name: 'PosterManage',
  methods: {
    // 上传图片
    uploadPhoto(e) {
      const filetype = file.name.split('.')[1] // 图片类型 如png
      const myImg = URL.createObjectURL(e.target.files[0])
      const img = new Image()
      img.src = myImg
      img.onload = function () {
        if (img.width !== img.height * 1.5) {
          console.error('图片的宽高比必须为1.5')
        } else {
          // 利用fileReader对象获取file
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = function (e) {
            // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
            const imgcode = e.target.result.split('base64,')[1]
            axios.post("/api/uploadImage", {imgcode, filetype}).then((res) => {
              if (res.data.code === 200) {
                console.log('图片添加成功:', res.data.message)
              }
            })
          }
        }
      }
    }
  },
}
</script>

建议

git提交的时候千万不要把密钥等信息提交了，不然你可能会收到如下邮件

可以创建一个文件.env，在这里添加相关的密钥信息等

下载dotenv，它会帮助我们将环境变量从 .env 文件加载到中 process.env

config.js

const dotenv = require("dotenv")

dotenv.config()

module.exports = {
  APP_HOST,
  APP_PORT,
  MYSQL_HOST,
  MYSQL_PORT,
  MYSQL_DATABASE,
  MYSQL_USER,
  MYSQL_PASSWORD,

  SecretId,
  SecretKey,
  Bucket,
  Region,
  prefix
} = process.env

最后，记得在.gitignore里加上.env