# 图片上传和附件上传说明
HtUpload 自定义输入框组件，基于el-upload实现；
Author chenglu@expservice.com.cn
# 示例
只能上传jpg/png格式文件，且不超过10MB
<template>
<div>
<ht-divider label="图片上传" />
<ht-upload :params="attachmentParam" :file-list="attachmentFiles" type="pic" />
</div>
</template>
<script>
// 实际项目需要用到以下 import
// import HtUpload from '@/components/HtUpload';
// import { findUploadedFiles } from '@/api/ht.common';
// import AppConfig from '@/appconfig';
export default {
// 实际项目需要用到以下 components
// components: { HtUpload },
data() {
return {
attachmentParam: {
account: 'admin',// 上传人
bizType: 'order',// 业务类型,根据实际项目自定义
bizPk: '',// 业务主键,当前数据id
folder: 'true@Demo' + '.rms.order@date',// 文件夹路径,根据实际项目自定义路径
isHoldName: 'true', // 是否保留原文件名标识
fileKind: 'orderInfo'// 附件类型,根据实际项目自定义
},
attachmentFiles: [] // 附件展示列表
}
},
methods:{
/**
* @todo: 加载附件
* @author: chenglu@expservice.com.cn
* @Date: 2023-05-26 08:41:32
*/
async loadAttachment() {
try {
const result = await this.$crud.fetchData(findUploadedFiles, // 查询已上传附件
{bizType: 'order', // 业务类型,根据实际项目自定义
bizPk: '', // 业务主键,当前数据id
fileKind: 'orderInfo' // 附件类型,根据实际项目自定义
});
if (Array.isArray(result))
result.map((x) => {
const param = {};
param['name'] = x.fileName;
param['id'] = x.id;
param['fuuid'] = x.fileUuid;
let url = AppConfig.filePreview;
url += 'fuuid=' + x.fileUuid + '&fileName=' + x.fileName + '&isHoldname=' + x.isHoldname + '&folder=' + x.isFolder + '@' + x.folderPath;
param['url'] = encodeURI(url);
this.attachmentFiles.push(param);
});
} catch (e) {
this.$notify.message(e, 'error');
}
}
},
mounted(){
/**
* @todo: 加载附件
* @author: chenglu@expservice.com.cn
* @Date: 2023-05-26 08:41:32
*/
// this.loadAttachment(); 实际项目需要用到该方法
}
};
</script>
1
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
Expand Copy Copy
将文件拖到此处，或选取文件
单个文件不超过10MB
<template>
<div>
<ht-divider label="附件上传" />
<ht-upload :params="attachmentParam" :file-list="attachmentFiles" />
</div>
</template>
<script>
// 实际项目需要用到以下 import
// import HtUpload from '@/components/HtUpload';
// import { findUploadedFiles } from '@/api/ht.common';
// import AppConfig from '@/appconfig';
export default {
// 实际项目需要用到以下 components
// components: { HtUpload },
data() {
return {
attachmentParam: {
account: 'admin',// 上传人
bizType: 'order',// 业务类型,根据实际项目自定义
bizPk: '',// 业务主键,取当前数据行id
folder: 'true@Demo' + '.rms.order@date',// 文件夹路径,根据实际项目自定义路径
isHoldName: 'true', // 是否保留原文件名标识
fileKind: 'orderInfo'// 附件类型,根据实际项目自定义
},
attachmentFiles: [] // 附件展示列表
}
},
methods:{
/**
* @todo: 加载附件
* @author: chenglu@expservice.com.cn
* @Date: 2023-05-26 08:41:00
*/
async loadAttachment() {
try {
const result = await this.$crud.fetchData(findUploadedFiles, // 查询已上传附件
{bizType: 'order', // 业务类型,根据实际项目自定义
bizPk: '', // 业务主键,取当前数据行id
fileKind: 'orderInfo' // 附件类型,根据实际项目自定义
});
if (Array.isArray(result))
result.map((x) => {
const param = {};
param['name'] = x.fileName;
param['id'] = x.id;
param['fuuid'] = x.fileUuid;
let url = AppConfig.filePreview;
url += 'fuuid=' + x.fileUuid + '&fileName=' + x.fileName + '&isHoldname=' + x.isHoldname + '&folder=' + x.isFolder + '@' + x.folderPath;
param['url'] = encodeURI(url);
this.attachmentFiles.push(param);
});
} catch (e) {
this.$notify.message(e, 'error');
}
}
},
mounted(){
/**
* @todo: 加载附件
* @author: chenglu@expservice.com.cn
* @Date: 2023-05-26 08:41:32
*/
// this.loadAttachment(); 实际项目需要用到该方法
}
};
</script>
1
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
Expand Copy Copy
# 版本
- v1.0.0