目录
准备工作
后端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文章来源：https://www.toymoban.com/news/detail-470578.html
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文章来源地址https://www.toymoban.com/news/detail-470578.html
到了这里，关于【Node】腾讯云OSS存储上传图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
