heart-upload

简介

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

安装

yarn add heart-upload

使用

1. 在main.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. 使用组件

<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 | 清空附件列表 |

共享地址

码云、 npm