hc-publish

hc组件库

2021/11/21 更新: 上传组件添加ui

引入

main.js

import HcPublish from 'hc-publish'
Vue.use(HcPublish)

使用

HcUpload

组件使用案例

<template>
  <div>
    <div @click="fileList = []">删除</div>
    <ChunkUpload
      ref="chunkUpload"
      @uploaded="handleUploaded"
      @uploadError="handleUploadError"
      token="{{ your token }}"
      project-id="{{ your projectId }}"
      :part-size="1024 * 1024"
      :multiple="true"
      :fileList.sync="fileList"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    // 上传成功处理
    handleUploaded() {
      // 上传成功回调
    },
    // 上传失败处理
    handleUploadError(msg) {
      this.$message.error(msg)
      // 返回错误提示，可以在这里进行消息弹窗提示
    }
  },
}
</script>

组件属性:
+ token: [required] 用户token
+ fileList: [required] 文件列表 默认值: []
+ projectId: 项目id
+ partSize: [required] 分块尺寸 默认值: 1024*1024 (1M)
+ multiple: 是否多选 默认值: false
+ color: 删除、加载中、文件图标颜色 默认值: #707070