Element UI Upload上传显示在input文本框

最新推荐文章于 2023-05-24 20:15:00 发布

埋名苟码

最新推荐文章于 2023-05-24 20:15:00 发布

阅读量3.4k

点赞数 6

CC 4.0 BY-SA版权

文章标签： elementui upload vue

本文链接：https://blog.csdn.net/weixin_40086938/article/details/118304367

本文介绍了一个基于Element UI实现的简单文件上传组件，用于展示如何选择并上传行驶证照片。该组件包括文件输入框、上传按钮及预览按钮，并通过自定义事件处理文件变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个很简单的样式需求：
点击button上传图片，图片名字显示在左边文本框
主要使用了这个方法：
在这里插入图片描述

                <el-form-item label="行驶证照片" class="inline-2">
                    <el-input v-model="Form.filename" class="input-320" placeholder="请选择文件"></el-input>
                    <el-upload
                            class="inline"
                            :show-file-list="false"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-change="handleChange"
                            :accept="'image/*'">
                        <el-button type="primary" style="margin-left: 5px" size="mini" title="上传文件"><i class="iconfont iconwenjian"></i></el-button>
                    </el-upload>
                    <el-button type="primary" style="margin-left: 5px" size="mini" title="浏览"><i class="iconfont iconyanjing"></i></el-button>
                </el-form-item>

   data() {
            return {
                Form: {
                    filename:'',
                }
              }
           }

        methods: {
            handleChange(file, fileList)
            {
                this.Form.filename=file.name;
            }
        }

后台未完待续…

Element UI Upload上传 显示在input文本框

Element UI Upload上传显示在input文本框