# 功能描述
继承于element的upload上传，增加和扩展了数据操作功能
# 属性props
本控件支持element的upload表单的全部属性。 1.控件本身属性
| 参数 | 必填 | 数据类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|---|
| reName | 否 | boolean | true | 是否对上传的文件进行重新命名 | |
| keepName | 否 | boolean | true | 是否保留原始文件名(仅reName为true时有效) | |
| oss | 否 | object | null | 上传文件到云平台(例如阿里云等) | |
| path | 否 | String | 文件的存放路径，如不设置则存放路径第一级目录为module指定值，二级目录为docID指定值 | ||
| module | 是 | String | 文件一级目录，一般采用模块名称作为一级目录（设置了path则无效） | ||
| docID | 否 | String,Number | 文件二级目录（设置了path则无效） | ||
| actionType | 否 | String | 当前操作类型，用于显示编辑或者查看界面 | ||
| isPreview | 否 | boolean | 是否预览（仅预览图片、pdf、mp3、mp4格式文件) | ||
| linkClick | 否 | String | down | down/preview | 点击链接时的操作:down:下载,preview:预览 |
| uploadSuccessCallBack | 否 | Function | 文件上传成功后的回调，参数为以逗号分隔的字符串 | ||
| action | 否 | String | /api/sei/file/public/upload | 文件上传后台url地址 |
2.element的upload属性 (opens new window)
提示
配置上传到阿里云平台：
在oss中指名aliYun，可差异化的配置aliYun，如果不配置，则默认采用服务器端的配置。
如果配置了action则上传到阿里云平台的同时不再上传到web服务器。
下例为上传时更改文件名，只上传到阿里云平台。
<x-upload v-model="scope.row.file" re-name :oss="{aliYun: {}}" action="http://zhmy.oss-cn-beijing.aliyuncs.com" module="sys_system" :doc-id="scope.row.sysid" action-type="edit" is-preview/>
提示
配置上传到阿里云平台的同时上传1份到web服务器：
在oss中指名aliYun，可差异化的配置aliYun，如果不配置，则默认采用服务器端的配置。
因为未配置action，因此上传到阿里云平台的同时再上传1份到web服务器
下例为上传时更改文件名，上传到阿里云平台时同时上传1份到web服务器做备份
<x-upload v-model="scope.row.file" re-name :oss="{aliYun: {}}" module="sys_system" :doc-id="scope.row.sysid" action-type="edit" is-preview/>
# 方法Methods
控件方法有:1.控件本身方法 2.element的upload方法 1.控件本身方法
| 方法名 | 参数 | 返回值类型 | 说明 |
|---|---|---|---|
| down | fileName | 下载文件 |
2.element的upload方法 (opens new window)
# 事件emit
1.控件本身事件
| 事件名 | 功能说明 | 参数说明 | 其它说明 |
|---|---|---|---|
| input | 点击文件移除按钮之后删除文件 | 待删除的文件 |
2.element的upload事件 (opens new window)
# 例1: 上传文件
<template>
<div style="height: 100%">
<x-table-edit ref="table" :data-source="{head:{module:'yw_demo'},option:{attFile:['file'],export:false,privilege:true,keyField:true,initRow:(row)=>row.uuid=getUUID()}}}">
<x-table-column prop="year" label="年度" width="80px"/>
<x-table-column prop="papername" label="期刊名称" width="150px"/>
<x-table-column prop="file" label="附件" width="250px">
<x-file-list slot="show" slot-scope="scope" module="yw_demo" :files="scope.row.file" title="证明文件" icon="el-icon-paperclip"/>
</x-table-column>
<x-dialog-edit slot="dialog" slot-scope="scope" request title="论文" width="1050px" :show-close="true">
<el-form label-position="right" label-width="110px" inline cols="3">
<x-form-item label="期刊名称" :required="true">
<x-input v-model="scope.row.papername" placeholder="请填写期刊名称" :disabled="scope.action"
v-rules="[{type:'required'}]"/>
</x-form-item>
<x-form-item label="附件">
<x-upload v-model="scope.row.file" module="yw_demo" :docID="scope.row.uuid"
:actionType="scope.actionType"></x-upload>
</x-form-item>
</el-form>
</x-dialog-edit>
</x-table-edit>
</div>
</template>
<script>
import {XQuery, XQueryItem, XSelect, XInput, XUpload, XFileList, tools} from 'sei-ui'
export default {
name: 'ywDemo',
components: {XQuery, XQueryItem, XSelect, XInput, XUpload, XFileList},
methods: {
getUUID() {
return tools.getUUID();
},
selectChange(data) {
data && (this.$refs.table.currEditSelection.newData.author = tools.getUname(), this.$refs.table.currEditSelection.newData.sort = 1) || (this.$refs.table.currEditSelection.newData.author = '');
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
提示
本例功能数据 v-model指文件名存放的字段，moudule指存放的一级目录(一般采用模块名称作为一级目录)，docID指文件存放的二级目录(一般采用文件字段所在记录行的主键值作为二级目录)，actionType指当前操作类型
注意
因为本例yw_demo模块对应表的主键为uuid字段，所以在data-source中配置有：initRow:(row)=>row.uuid=getUUID()，作用是当新增加记录时，由于数据未保存因此uuid无值从而无法确定上传文件的二级目录，因此前端对主键uuid先赋值从而确定上传文件的二级目录