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

2018年12月11日作者: 国瑞个人博客 544次浏览

今天需要在表格中嵌套一个文件上传，并且显示出图片的名字，也可以取消文件上传，最开始我使用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.的错误，这句话意思为：你正确地注册了这个组件吗？对于递归组件，请确保提供“名称”选项。这时候我们去掉引号就能够正常使用了。

百度已收录

点击快速分享：

以上就是国瑞前端个人博客带来的是《解决iview中的upload使用render上传图片的问题》，感谢您的观看！

如果没有特殊的说明，本文即为国瑞前端博客原创(www.huanggr.cn)，欢迎读者转载并保留本站版权！https://www.huanggr.cn/1088.html

「专业前端博客，如果觉得我的文章对您有用，请帮助本站成长」

赞( 24 ) 打赏