sky-upload

基于 Element-UI 的上传组件封装

安装

$ yarn install sky-upload -S

目录结构

.
├── README.md
├── babel.config.js
├── lib
│   ├── demo.html
│   ├── sky-upload.common.1.js
│   ├── sky-upload.common.1.js.map
│   ├── sky-upload.common.js
│   ├── sky-upload.common.js.map
│   ├── sky-upload.umd.1.js
│   ├── sky-upload.umd.1.js.map
│   ├── sky-upload.umd.js
│   ├── sky-upload.umd.js.map
│   ├── sky-upload.umd.min.1.js
│   ├── sky-upload.umd.min.1.js.map
│   ├── sky-upload.umd.min.js
│   └── sky-upload.umd.min.js.map
├── package.json
├── packages
│   ├── App.vue
│   ├── assets
│   │   ├── 180.png
│   │   ├── EXCEL.png
│   │   ├── PDF.png
│   │   ├── PPT.png
│   │   ├── TXT.png
│   │   ├── WORD.png
│   │   ├── down.png
│   │   ├── left.png
│   │   ├── rar.png
│   │   ├── right.png
│   │   └── zip.png
│   ├── index.js
│   ├── lib
│   │   ├── index.js
│   │   ├── ossUpload.js
│   │   ├── sky-img-rotate.vue
│   │   ├── skyuploadimg.vue
│   │   └── util.js
│   └── main.js
├── vue.config.js
└── yarn.lock

使用

在 main.js 文件中引入插件并注册

# main.js import skyUpload from 'sky-upload' import OSS from 'ali-oss'
Vue.use(skyUpload, { request: skyRequest, OSS })

<sky-upload
  platform="iglobalwin-pri-oss" // （项目-空间-平台）
  folder = 'accessory'  // 文件夹名称
  :upload-success="upload"
  :remove-success="remove"
></sky-upload>

在页面中引入插件

# 页面使用
<template>
    <sky-upload
      ref="upload"
      platform="iglobalwin-pri-oss" // （项目-空间-平台）
      folder = 'accessory'  // 文件夹名称
      :upload-success="upload"
      :remove-success="remove"
    ></sky-upload>
</template>

<script>
import skyUpload from 'sky-upload'
import OSS from 'ali-oss'
import request from 'skytech-request'
export default {
    components: {skyUpload}
    mounted() {
        this.$refs.upload.init({request, OSS})
    }
}
</script>

plarform

// 项目-空间-平台  aws s3暂不支持
iglobalwin - pub - oss;
iglobalwin - pri - oss;
skycloud - pub - oss;
skycloud - pri - oss;
website - pub - oss;
website - pri - oss;

props

  props: {
    value: {
      // 文件列表
      required: true
    },
    limit: { // 数量限制
      required: false
    },
    readOnly: {
      // 只读
      required: false
    },
    disabled: {
      // 禁止上传
      required: false
    },
    uploadSuccess: {
      // 上传成功回调
      required: false
    },
    removeSuccess: {
      // 删除成功回调
      required: false
    },
    accept: {
      // 文件类型
      required: false
    },
    action: {
      // 上传地址
      required: false,
      default: ''
    },
    judgeType: {
      // 文件类型判断
      required: false,
      default: ''
    },
    judgeSize: {
      // 文件大小判断
      required: false,
      default: 0
    },
    errorCallback: {
      // 判断错误回调
      required: false
    },
    uploadProgress: {
      // 上传进度回调
      required: false
    },
    fileName: {
      // 自定义文件名
      required: false
    },
    showFileInfo: {
      // 是否显示文件列表
      required: false,
      default: false
    },
    platform: {
      // 项目-空间-平台
      required: false,
      default: 'iglobalwin-pub-oss'
    },
    folder: {
      // 文件夹名称
      required: false
    },
    multiple: {
      // 是否开启多文件上传
      type: Boolean,
      default: false
    },
    // attribute: {
    //   el-upload属性
    //   type: Object
    // },
    listType: {
      // el-upload文件列表类型
      type: String,
      default: 'picture-card'
    },
    showFileList: {
      // 是否显示el-upload文件列表
      type: Boolean,
      default: false
    },
    uploadBtn: {
      // 上传按钮类型（icon, btn）
      type: String,
      default: 'icon'
    },
    tip: {
      // 提示信息
      type: String
    },
    bucketName: {
      type: Object
    }
  }