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

一个很简单的样式需求:
点击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;
            }
        }

后台未完待续…

  • 6
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 Element UIUpload 组件中显示图片,你可以使用以下步骤: 1. 首先,确保你已经安装了 Element UI 并正确引入了该库。 2. 在你的 Vue 组件中,使用 `<el-upload>` 标签创建一个上传组件。例如: ```html <template> <el-upload class="upload-demo" action="http://your-upload-url" :on-success="handleUploadSuccess" :file-list="fileList" :auto-upload="false" list-type="picture"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </template> ``` 3. 在你的 Vue 组件中,定义 `fileList` 数据和相应的处理方法。例如: ```javascript data() { return { fileList: [] }; }, methods: { handleUploadSuccess(response, file, fileList) { // 处理上传成功的回调函数 console.log(response); }, submitUpload() { // 手动触发上传 this.$refs.upload.submit(); } } ``` 4. 在你的 Vue 组件中,使用 `<el-image>` 标签来显示上传的图片。例如: ```html <template> <div v-for="(file, index) in fileList" :key="index"> <el-image :src="file.url" fit="contain"></el-image> </div> </template> ``` 这样,当用户选择图片后,图片会显示在 `<el-image>` 组件中。 请注意,以上代码仅为示例,你需要根据自己的实际需求进行相应的修改和调整。同时,你还需要根据自己的后端配置正确设置上传 URL 和处理上传成功的回调函数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值