解决iview中的upload使用render上传图片的问题

2018-12-11 分类：Iview 作者：huanggr 阅读（4071）

今天需要在表格中嵌套一个文件上传，并且显示出图片的名字，也可以取消文件上传，最开始我使用render来实现，但是发现render里面上传组件的自定义事件使用无效，于是我们采用了在该文件中全局引用自行封装的组件来实现上传效果，以下是详细代码：

uploads.vue组件

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

<template>
<div>
<div class="box">
<div class="current"
v-if="file !== null"> {{file.name }}
</div>
<div class="current"
v-else>请选择文件</div>
<Upload :before-upload="handleUpload"
action="//jsonplaceholder.typicode.com/posts/">
<Button class="btn">选择</Button>
</Upload>
<div class="cancel"
@click="cancel">取消</div>
</div>
<Button style="display:none"
type="text"
@click="upload"
:loading="loadingStatus">{{ loadingStatus ? '未提交' : '点击提交' }}</Button>
</div>
</template>
<script>
export default {
name: 'Uploads',
props: [],
data () {
return {
file: null,
loadingStatus: false,
formData: []
}

},
methods: {
cancel (list) {
console.log('点击取消了')
this.file = null
console.log(list)
this.$emit('cancelUploadsFile', list)
},
handleUpload (file) {
console.log('当前选中====', file.name)
this.file = file;
this.formData.push(file.name)
this.$emit('addUploads', this.formData)
console.log('自定义事件this.formData===', this.formData)
return false;
},
upload () {
this.loadingStatus = true;
setTimeout(() => {
this.file = null;
this.loadingStatus = false;
this.$Message.success('Success')
}, 1500);
}
}
}
</script>
<style lang="less" scoped>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 1000px;
height: 700px;
}
.box {
width: 150px;
height: 31px;
/*border: 1px solid red;*/
line-height: 30px;
}

.current {
width: 80px;
height: 100%;
color: #bbb;
float: left;
white-space: nowrap; /*文本不换行*/
overflow: hidden; /*超出隐藏*/
text-overflow: ellipsis; /*显示省略号*/
background-color: rgb(248, 248, 248);
border: 1px solid rgb(204, 204, 204);
}

.btn {
padding: 5px 2px;
width: 40px;
height: 100%;
float: left;
box-sizing: border-box;
border: 1px solid rgb(204, 204, 204);
}
.cancel {
width: 40px;
height: 30px;
float: left;
color: #999;
margin: -50px 145px;
line-height: 30px;
cursor: pointer;
}
</style>

在需要使用显示的页面全局引用该组件

引入组件

1	import Uploads from '@/views/content/equip/components/upload/upload.vue'

注册为全局组件组件

1
2
3

components: {
Uploads
}

在table中使用render生成组件

<Table ref="selection"
:columns="columnsTitle"
:border='false'
:stripe='true'
:row-class-name="rowClassName"
:data="list"></Table>

list: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: '24242424242424242424242424242424242424242424242424',
address: 'London No. 1 Lake Park'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park'
},
{ name: 'Jon', },
{ name: 'Jon Snow', },
{ name: 'Jon Snow', },
{ name: 'Jon Snow', },
{ name: 'Jon Snow', },
{ name: 'Jon Snow', },
{ name: 'Jon Snow', }
],
columnsTitle: [
{
title: '标题名称',
key: 'name',
width: 236,
render: (h, params) => {
return h('div', [
h('img', {
props: {
src: "fsdfsdfsdfsd"
},
style: {
width: '70px',
height: '40px',
color: 'blue',
cursor: 'pointer',
display: 'inline-block',
float: 'left',

},
domProps: {
align: 'center',
src: './access/logo.png',
},
}),
h('span', {
style: {
color: 'rgb(6,129,211)',
cursor: 'pointer',
display: 'inline-block',
width: '115px',
height: '40px',
float: 'right',
lineHeight: '40px',
whiteSpace: 'nowrap', /*文本不换行*/
overflow: 'hidden', /*超出隐藏*/
textOverflow: 'ellipsis' /*显示省略号*/
},
on: {
click: () => {
console.log('当前选中==》', params)
}
}
}, params.row.name)
])
}
},
{
title: '当前文件名称',
width: 150,
key: 'age'
},
{
title: '上传升级文件',
key: 'action',
width: 230,
align: 'center',
render: (h, params) => {
return h(Uploads, {
on: {
'addUploads': (e) => {
console.log('成功获到值', e)
console.log(this.uploadList.push(e))
//uploadList
},
'cancelUploadsFile': (e) => {
console.log('删除列表', e)
let index = this.uploadList.indexOf(e);
console.log('index====', index)
this.uploadList.splice(index, 1)
}
}
}, this.file);
}
}
],

延伸解读：

这样就可以实现文件上传了，不过值得注意的是，使用render生成的组件，不可以添加引号，，否则就会报一个did you register the component correctly? For recursive components, make sure to provide the "name" option.的错误，这句话意思为：你正确地注册了这个组件吗？对于递归组件，请确保提供“名称”选项。这时候我们去掉引号就能够正常使用了。

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

赞(24) 打赏

标签：