1、首先登录腾讯云官网控制台 进入对象存储页面
2、找到跨越访问CIRS设置 配置规则
点击添加规则
填写信息
3、书写代码
这里用VUE3书写
第一种用按钮出发事件形式
<template><div><input type="file" @change="handleFileChange" /></div>
</template><script>
import COS from "cos-nodejs-sdk-v5"; // 导入cos-nodejs-sdk-v5包export default {methods: {handleFileChange(event) {const file = event.target.files[0];const cos = new COS({SecretId: "YOUR_SECRET_ID",SecretKey: "YOUR_SECRET_KEY",});// 替换成你的 Bucket 名称和 Regionconst bucket = "YOUR_BUCKET_NAME";const region = "YOUR_BUCKET_REGION";// 生成对象存储桶中的图片路径const key = `images/${file.name}`;// 将图片上传到腾讯云对象存储桶cos.putObject({Bucket: bucket,Region: region,Key: key,Body: file,},(err, data) => {if (err) {console.error("上传失败：", err);this.$message.error("上传失败")} else {console.log("上传成功：", data.Location);this.$message.success("上传成功")}});},},
};
</script>
4、测试
点击选择文件
选择图片
等待结果
第二种用el-upload
<el-upload v-if="imageUrl===null"class=""list-type="picture-card"
