# heart-upload

**Repository Path**: pjhpeter/heart-upload

## Basic Information

- **Project Name**: heart-upload
- **Description**: 基于Vue、Element UI的文件上传组件，后端对应的是jeestie，基本支持Element UI upload 组件的API
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2020-05-06
- **Last Updated**: 2021-09-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# heart-upload

## 简介
基于Vue、Element UI的文件上传组件，后端对应的是jeestie，基本支持Element UI upload 组件的API

## 安装
```cmd
yarn add heart-upload
```

### 使用
1. 在main.js中引入
```js
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// 必须在Element UI之后引入
import Uploader from "heart-upload";
import "heart-upload/lib/heart-upload.css";

Vue.use(Element);
Vue.use(Uploader);
```

2. 使用组件
```vue
<uploader  bizKey="1234567890" bizType="test-yi-xia" baseUrl="http://127.0.0.1:10086/sbos/a" token="e2dc400c760948be9660af3edb4d5925"/>
```

### 参数说明
| 参数名 | 数据类型 | 说明 |
| --- | --- | --- |
| bizKey | String | 附件对应业务的id（**必须项**） |
| bizType | String | 附件对应业务类型，与后端约定好（**必须项**） |
| baseUrl | String | 后端接口的前置地址（**必须项**） |
| token | String | 用户令牌或sessionId（**必须项**） |
| uploadButtonClass | String | 上传按钮的样式，**指定此属性时，style标签不能时scoped** |
| tip | String | 显示在上传按钮下方的简单说明 |
| layout | Array[String] | 设置文件列表布局，默认显示文件列表所有组件，可传入的值有："progress"（进度条），"fileSize"（文件大小），"userName"（上传人），"uploadDate"（上传日期） |

> 本组件基本支持Element UI upload组件的API，所以可以根据Element UI upload组件的文档传入参数实现更多的个性化配置
>
> 当使用Element UI upload的参数时，参数名应使用驼峰式命名，如官方的show-file-list参数，应改成showFileList
>
> 但是heart-uploader组件并不支持以下参数：**action**、**http-request**、**file-list**、**on-progress**、**before-upload**、**on-success**、**on-error**

### 方法
| 名称 | 说明 |
| --- | --- |
| getFileList | 向后端发请求获取附件列表 |
| clearFileList | 清空附件列表 |

### 共享地址
[码云](http://gitee.com/pjhpeter/heart-upload)、
[npm](http://www.npmjs.com/package/heart-upload)