vue使用腾讯云上传图片

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传图片</button>
  </div>
</template>

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

export default {
  data() {
    return {
      file: null,
      cos: null,
    };
  },
  created() {
    this.cos = new COS({
      SecretId: 'YOUR_SECRET_ID',
      SecretKey: 'YOUR_SECRET_KEY',
    });
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      if (!this.file) {
        alert('请选择文件');
        return;
      }
      const Bucket = 'YOUR_BUCKET_NAME';
      const Region = 'YOUR_REGION';
      const Key = `uploads/${this.file.name}`;

      this.cos.putObject({
        Bucket,
        Region,
        Key,
        Body: this.file,
      }, (err, data) => {
        if (err) {
          console.error('上传失败:', err);
        } else {
          console.log('上传成功:', data);
        }
      });
    },
  },
};
</script>