当前位置：首页 > news >正文

基于element-plus +腾讯云COS实现图片上传

news 2025/9/15 16:25:54

① 首先基于element-plus里面的:http-request="upload"自定义封装事件写一个点击事件之后基于腾讯云的

登录对象存储控制台，创建存储桶。获取存储桶名称和地域名称
登录访问管理控制台，获取您的项目 SecretId 和 SecretKey。
在项目中安装 SDK 【npm i cos-js-sdk-v5 --save】
使用 const COS = require(‘cos-js-sdk-v5’);// 或 import COS from ‘cos-js-sdk-v5’;进行引入
前端使用固定密钥计算签名，该格式适用于前端调试，若使用此格式，请避免泄露密钥

【这里还有一些推荐的方法具体见 https://cloud.tencent.com/document/product/436/11459 】

当我们获取SecretKey 和 SecretId之后在定义的upload上传方法中调用 cos.uploadFile实现图片上传

腾讯云的相关操作：【https://cloud.tencent.com/document/product/436/11459】

// 代码:
<template><div class="upload-box"><!-- 给action一个#号 就不会报错了 --><!-- file-list是上传的文件列表 可以绑定到上传组件上，让上传组件来显示 --><!-- upload组件显示的是file-list --><el-upload class="avatar-uploader" list-type="picture-card" :limit="1" action="#" :before-upload="beforeUpload":http-request="upload" :on-preview="preview" :file-list="state.fileList"style="width: 200px":on-change="changeFile":class="{ disabled: fileComputed }"><!-- 当fileComputed 的值为 true，则给元素添加名为 "disabled" 的 CSS 类名；如果 fileComputed的值为 false，则移除该 CSS 类名。 --></el-upload><el-dialog v-model="state.showDialog" title="图片预览"><img :src="state.imgUrl" alt="" style="width: 100%" /></el-dialog></div>
</template><script setup>
import { reactive, computed } from "vue"
import COS from "cos-js-sdk-v5" // 引入腾讯云cos包
import { ElMessage } from "element-plus"
// 实例化COS对象
const cos = new COS({// 拷贝自己的秘钥和key 只有用自己的key和自己的秘钥才能上传到自己的存储桶里面SecretId: "自己的身份识别ID", // 身份识别 IDSecretKey: "自己的身份秘钥", // 身份密钥
})const state = reactive({fileList: [],showDialog: false,imgUrl: "",currentFileUid: null, // 记录当前正在上传的uid
})
const fileComputed = computed(() => {return state.fileList.length === 1
})//   点击预览事件
const preview = (file) => {console.log(file.url)state.imgUrl = file.urlstate.showDialog = true
}const beforeUpload = (file) => {const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"]if (!types.some((item) => item === file.type)) {//   如果不存在ElMessage.error("上传图片只能是 JPG、GIF、BMP、PNG 格式!")return false // 上传终止}// 检查文件大小  5M 1M = 1024KB 1KB = 1024Bconst maxSize = 10 * 1024 * 1024if (file.size > maxSize) {//   超过了限制的文件大小ElMessage.error("上传的图片大小不能大于5M")return false}//   已经确定当前上传的就是当前的这个file了state.currentFileUid = file.uidreturn true // 最后一定要return  true
}
// changeFile 函数的主要作用是在文件列表发生变化时，根据最新的文件列表更新 state.fileList，保持数据的同步和一致性。
// 这样可以确保组件在文件变化时能够及时更新展示的内容。如果有任何疑问或需要进一步解释，请随时告诉我！
// 不能用push 这个钩子会执行多次
const changeFile = (file, fileList) => {// file是当前的文件 fileList是当前的最新数组 state.fileList// 如果当前fileList中没有该文件的话 就往里进行追加state.fileList = fileList.map((item) => item)
}
// 进行上传操作
const upload = (params) => {if (params.file) {// 执行上传操作// 这里相当于传入了两个参数 第一个参数包含了上传所需要的参数，第二个参数是一个回调函数用于处理上传操作的结果// 包括错误信息和上传成功后的返回数据cos.putObject({Bucket: "存储桶名称", // 存储桶    【自己创建的桶的名称】Region: "ap-nanjing", // 地域 【自己创建的时候选择的地域】Key: params.file.name, // 文件名Body: params.file, // 要上传的文件对象StorageClass: "STANDARD", // 上传的模式类型 直接默认 标准模式即可},(err, data) => {if (!err && data.statusCode === 200) {// 上传成功跟新状态中的文件列表state.fileList = state.fileList.map((item) => {// 去找谁的uid等于刚刚记录下来的idif (item.uid === state.currentFileUid) {// 将成功的地址赋值给原来的url属性return { url: "http://" + data.Location, upload: true }}return item})}})}
}
</script><style>
.upload-box {display: block;width: 200px;margin: 0 auto;
}.disabled .el-upload--picture-card {display: none;
}
</style>

参考：https://cloud.tencent.com/document/product/436/64960#.E9.AB.98.E7.BA.A7.E4.B8.8A.E4.BC.A0

  https://juejin.cn/post/7093678563747954696

注意：我们在使用cos进行上传的时候需要创建桶，获取秘钥等操作
创建存储桶【https://cloud.tencent.com/document/product/436/13309 创建存储桶的具体操作】文档中心-左侧创建存储桶
获取秘钥的具体操作【https://cloud.tencent.com/document/product/598/40488】
–>