将OSS直传封装成一个可复用的组件可以显著提高代码的可维护性和重用性。以下是一个基于Vue.js的示例，介绍如何将OSS直传封装成一个组件，并在其他页面调用。

1. 创建OSS直传组件

首先，创建一个名为OssUploader.vue的组件。

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <div v-if="uploadProgress >= 0">
      <p>上传进度：{{ uploadProgress }}%</p>
    </div>
    <div v-if="uploadError" class="error">{{ uploadError }}</div>
  </div>
</template>

<script>
import OSS from 'ali-oss';

export default {
  data() {
    return {
      uploadProgress: -1, // 上传进度
      uploadError: null,  // 上传错误信息
    };
  },
  methods: {
    async getSTSCredentials() {
      // 调用后端API获取STS凭证
      const response = await fetch('你的后端API');
      return response.json();
    },
    
    async uploadFile(file) {
      const { AccessKeyId, AccessKeySecret, SecurityToken, Bucket } = await this.getSTSCredentials();

      const client = new OSS({
        region: 'oss区域',
        accessKeyId: AccessKeyId,
        accessKeySecret: AccessKeySecret,
        bucket: Bucket,
        secure: true,
        stsToken: SecurityToken,
      });

      // 设置上传文件的名称
      const objectName = `uploads/${file.name}`;

      const options = {
        progress: (percentage) => {
          this.uploadProgress = Math.round(percentage * 100);
        },
      };

      try {
        const result = await client.put(objectName, file, options);
        console.log('上传成功', result);
        this.uploadProgress = 100; // 上传完成
        this.uploadError = null;    // 清除错误信息
        this.$emit('upload-success', result); // 事件通知上传成功
      } catch (error) {
        this.uploadError = '上传失败: ' + error.message;
        console.error('上传失败', error);
      }
    },
    
    handleFileUpload(event) {
      const file = event.target.files[0]; // 获取用户选择的文件
      if (file) {
        this.uploadFile(file);
      }
    },
  },
};
</script>

<style scoped>
.error {
  color: red;
}
</style>

2. 在其他页面中使用组件

在其他页面中使用封装好的OssUploader组件，如下所示：

<template>
  <div>
    <h1>文件上传</h1>
    <OssUploader @upload-success="handleUploadSuccess" />
  </div>
</template>

<script>
import OssUploader from './OssUploader.vue';

export default {
  components: {
    OssUploader,
  },
  methods: {
    handleUploadSuccess(result) {
      // 处理上传成功后的逻辑
      console.log('处理上传成功的结果', result);
      // 你可以在这里例如保存返回的URL到状态管理或更新UI
    },
  },
};
</script>

3. 说明

• 组件结构：OssUploader.vue是一个文件上传组件，封装了获取STS凭证、文件上传以及进度反馈的逻辑。
• 事件处理：通过this.$emit('upload-success', result)，在上传成功后向父组件通知，可以在父组件中处理相应的逻辑。
• 样式：组件内部简单定义了一些样式，增强用户体验。

4. 注意事项

• 错误处理：在实际使用中，您可能需要根据项目需求调整错误处理机制。
• API安全性：确保后端API的安全性，因为获取STS凭证是敏感操作。
• OSS配置：根据需要配置OSS的区域、Bucket等信息，确保这些信息是动态或通过props传入的。
• Vue环境：以上示例假设你在使用Vue.js，如果使用其他框架（如React），思路类似但代码实现会有所不同。

标签： 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。