华为云 OBS 上传组件 (c-upload-cloud-pc)

c-upload-cloud-pc 是基于 ElementUI 的华为云 OBS 上传组件，支持单/多文件上传，适用于 PC 端。所有 OBS 参数均由父组件动态传入，适合企业级文件上传场景。

基本用法

<template>
  <c-upload-cloud-pc
    :bucket="obsConfig.bucket"
    :endpoint="obsConfig.endpoint"
    :ak="obsConfig.ak"
    :sk="obsConfig.sk"
    :access-url="obsConfig.accessUrl"
    :multiple="true"
    :limit="3"
    accept="image/*"
    dir="test"
    @success="handleUploadSuccess"
    @error="handleUploadError"
  />
</template>

<script>
export default {
  data() {
    return {
      obsConfig: {
        bucket: 'your-bucket',
        endpoint: 'obs.cn-xxx.myhuaweicloud.com',
        ak: 'xxx',
        sk: 'xxx',
        accessUrl: 'https://your-bucket.obs.cn-xxx.myhuaweicloud.com'
      }
    }
  },
  methods: {
    handleUploadSuccess(url, file) {
      this.$message.success('上传成功: ' + url);
    },
    handleUploadError(err, file) {
      this.$message.error('上传失败: ' + (err && err.Message || err));
    }
  }
}
</script>

属性说明

属性名	类型	必填	默认值	说明
bucket	String	是	-	OBS 桶名
endpoint	String	是	-	OBS 终端节点（如 obs.cn-southwest-2.myhuaweicloud.com）
ak	String	是	-	华为云 AK
sk	String	是	-	华为云 SK
accessUrl	String	是	-	文件访问前缀（如 https://xxx.obs.cn-xxx.myhuaweicloud.com）
multiple	Boolean	否	false	是否多文件上传
limit	Number	否	5	最大上传文件数
accept	String	否	''	允许上传的文件类型
dir	String	否	''	上传目录前缀

事件说明

事件名	回调参数	说明
success	url, file	上传成功
error	err, file	上传失败
remove	file, fileList	文件被移除时

组件特性

• 支持单/多文件上传，最大支持 100MB 文件
• 上传进度实时反馈，上传成功自动拼接访问 URL
• 所有 OBS 参数由父组件传入，安全灵活
• 支持自定义上传目录前缀
• 支持文件类型限制
• 上传失败自动提示错误信息

注意事项

1. 组件依赖 ElementUI，请确保项目已正确引入。
2. 需通过 script 标签引入华为云 OBS SDK（esdk-obs-browserjs-without-polyfill.3.25.5.1.min.js）。
3. 上传文件大小限制为 100MB，超出会自动拦截。
4. 上传成功后会自动触发 success 事件，返回文件访问 URL。
5. 上传失败会触发 error 事件，返回错误信息。
6. 组件内部不保存 AK/SK 等敏感信息，建议通过安全方式动态获取。

样式说明

• 默认宽度 400px，可通过外部样式自定义
• 支持 ElementUI 原生样式扩展

---

如需更多定制化需求，请参考源码或联系组件维护者。