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 名称和 Region
      const 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"