vue3实现前端传到oss

安装OSS SDK：

bash
npm install ali-oss
在Vue组件中引入OSS SDK：

javascript
import OSS from 'ali-oss';
在组件中创建OSS客户端实例：

javascript
const client = new OSS({  
  region: '<Your OSS Region>',  
  accessKeyId: '<Your AccessKeyId>',  
  accessKeySecret: '<Your AccessKeySecret>',  
  bucket: '<Your Bucket Name>'  
});
在模板中创建一个文件输入元素：

html
<template>  
  <div>  
    <input type="file" @change="handleFileUpload" />  
  </div>  
</template>
在组件的methods中实现文件上传方法：

javascript
methods: {  
  async handleFileUpload(event) {  
    const file = event.target.files[0];  
    const options = {  
      progress: (p) => console.log(`progress: ${p * 100}%`) // 打印上传进度信息（可选）  
    };  
    try {  
      const result = await client.multipartUpload('object-name', file, options);  
      console.log(result); // 上传成功后的结果信息  
    } catch (error) {  
      console.error(error); // 上传失败时的错误信息  
    }  
  }  
}
在模板中添加一个按钮或其他触发器，用于触发文件选择和上传操作。例如：

html
<template>  
  <div>  
    <input type="file" @change="handleFileUpload" />  
    <button @click="submitFile">上传文件</button>  
  </div>  
</template>
在组件的methods中添加提交文件的方法：

javascript
methods: {  
  // ... 其他方法 ...  
  async submitFile() {  
    // 选择文件并触发上传操作，例如使用第三方库或自定义逻辑实现文件选择和上传。  
  }  
}
请确保替换代码中的<Your OSS Region>、<Your AccessKeyId>、<Your AccessKeySecret>和<Your Bucket Name>为实际的值。此示例仅为简单演示，你可以根据自己的需求进行适当的调整和扩展。