vue3+ts 封装上传图片(限制大小、尺寸)和文件到oss

在Vue 3和TypeScript环境下，你可以创建一个封装了上传图片到OSS的功能组件，并且添加了对图片大小和尺寸的限制。以下是一个简化的示例代码：

<template>
  <div>
    <input type="file" @change="uploadToOSS" />
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import OSS from 'ali-oss';
 
export default defineComponent({
  name: 'UploadToOSS',
  props: {
    // 传入OSS的配置
    ossConfig: {
      type: Object,
      required: true
    },
    // 图片大小限制
    sizeLimit: {
      type: Number,
      default: 5 * 1024 * 1024 // 5MB
    },
    // 图片尺寸限制
    dimensionLimit: {
      type: Object,
      default: () => ({ maxWidth: 1000, maxHeight: 1000 })
    }
  },
  methods: {
    async uploadToOSS(event: Event) {
      const input = event.target as HTMLInputElement;
      if (!input.files || !input.files.length) return;
 
      const file = input.files[0];
      if (file.size > this.sizeLimit) {
        alert('文件大小超出限制');
        return;
      }
 
      const img = new Image();
      img.onload = async () => {
        if (img.width > this.dimensionLimit.maxWidth || img.height > this.dimensionLimit.maxHeight) {
          alert('图片尺寸超出限制');
          return;
        }
 
        const client = new OSS(this.ossConfig);
        try {
          const result = await client.put(file.name, file);
          console.log(result);
        } catch (error) {
          console.error(error);
        }
      };
      img.src = URL.createObjectURL(file);
    }
  }
});
</script>

在这个组件中，我们使用了<input type="file">来让用户选择文件，然后在uploadToOSS方法中进行了图片大小和尺寸的校验，如果通过校验，则使用ali-oss SDK将图片上传到OSS。你需要在调用这个组件时传入正确的OSS配置。