国瑞个人博客
首页 > Vue-Cli > Iview > 解决iview中的upload使用render上传图片的问题

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

解决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生成组件

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
107
            <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 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
24

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

相关文章:

共有 0 条评论

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群,主要和前端相关,欢迎广大前端(抱有学习目的均可)爱好者加入!广告请勿添加!

升级版本

web前端开发博客,基于vue脚手架制作的前端博客正在制作中,尽情期待,目前示例的代码位于此处

最新版本(尽请期待)-web前端开发博客

精彩评论

本站主要提供服务

二年web前端开发博客,本站专注提供web资源下载,技术问题解答,经验分享,也提供新手的web技术指导,二年前端个人博客,期待你的加入!

站点统计

  • 文章总数: 269 篇
  • 草稿数目: 50 篇
  • 分类数目: 26 个
  • 页面总数: 16 个
  • 评论总数: 223 条
  • 链接总数: 10 个
  • 标签总数: 104 个
  • 建站时间: 808 天
  • 注册用户: 659 人
  • 访问总量: 8785205 次
  • 最近更新: 2019年7月15日
-->