在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配置。