vue中使用腾讯云对象存储桶cos来上传图片

本文链接：https://blog.csdn.net/Singe_lq/article/details/134037874

本文介绍了如何在Vue应用中使用COS-js-sdk-v5与腾讯云对象存储进行图片上传，包括安装SDK、设置文件格式限制和上传方法实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中使用腾讯云对象存储桶上传图片

1.安装cos-js-sdk-v5

npm install cos-js-sdk-v5

2.腾讯云步骤

请添加图片描述

3.代码部分(封装组件)

<template>
  <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="upload"

  >
    <img v-if="value" :src="value" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
import COS from "cos-js-sdk-v5";

export default {
  props: ["value"],
  data() {
    return {
    };
  },
  methods: {
    beforeAvatarUpload(file) {
      // 设置图片格式 
      const imgArr = ["image/jpeg", "image/png", "image/jpg", "image/gif"];
      const isJPG = imgArr.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是JPG格式、PNG格式或GIF格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 
    upload(params) {
      // console.log(params);
      // 上传到腾讯云服务器 SDK(语法)
      const cos = new COS({
        // 密钥
        SecretId: "AKIDhDc3MXVJ3h4Vn2FG5g4To16tbJsCUmvr",
        SecretKey: "udAlCsa8ZpywlPoQ9bzAIJD4q7HRk3HO",
      });
      cos.putObject(
        {
          Bucket: "lvqing-img-1321844288" /* 填入您自己的存储桶，必须字段 */,
          Region: "ap-nanjing" /* 存储桶所在地域，例如ap-beijing，必须字段 */,
          Key: "xx.jpg" /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
          Body: params.file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */,
          onProgress: function (progressData) {
            console.log(JSON.stringify(progressData));
          },
        },
        (err, data) => {
          console.log(err || data);
          if (data) {
            // 通知父亲
            this.$emit("input", "https://" + data.Location);
          }
        }
      );
    },
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>