做一个图片上传功能的输入框，用vuel.js+element-ui来做，会的进，急！~

[qq_39034200]

需求是用vue.js+element-ui做出如下图的一个图片上传功能。（如图所示）



要求点击“浏览”，可以选择本地图片，之后将图片的文件名显示到左边的文本框中，哪位前端大神能帮忙解决一下，感激不尽。
很急，希望能把完整代码po上，有讲解更好，拜谢。

[persuit666]

思路就是自己写个vue组件，把elementui的input输入框和上传组件结合起来，样式什么的自己调整，以下是思路

  <el-input placeholder="请输入内容" v-model="filename" readonly>
<el-upload slot="append"
  class="upload-demo" :auto-upload="false" :on-change="handleChange">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
  </el-input>

data:{
filename:'',
},
methods:{
handleChange(file, fileList)
{
this.filename=file.name;//这个地方你可以看看file里边哪个属性符合你
}
}

[qq_39034200]

引用 1 楼 persuit666 的回复:

思路就是自己写个vue组件，把elementui的input输入框和上传组件结合起来，样式什么的自己调整，以下是思路

  <el-input placeholder="请输入内容" v-model="filename" readonly>
<el-upload slot="append"
  class="upload-demo" :auto-upload="false" :on-change="handleChange">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
  </el-input>

data:{
filename:'',
},
methods:{
handleChange(file, fileList)
{
this.filename=file.name;//这个地方你可以看看file里边哪个属性符合你
}
}

多谢大神的回复，现在两个小问题。
1：我照你这个控件做了，但是做出来的效果是如下图所示

它的图片选中之后显示在了浏览图标的下方，可是我是想让和它复合的文本框里读取到此图片的路径，如何做到，最好po详细代码

2你data里的filename是返回的啥，这个图片的路径吗，我需要得到图片的路径，然后随表单一起提交，最后存到本地数据库，哪个参数可以得到图片的路径

十分火急，望尽快告知，谢谢好人啦

[persuit666]

上传控件的这个属性show-file-list设置为false，就不显示上传附件了，然后在上传组件的on-change事件里获取到file的路径，不是已给你写示例代码了吗？图片的路径是本地浏览的路径，你存这个有意思？应该是你浏览一个文件后立马上传到服务器，上传完成后有个事件on-success，把你上传文件到服务器的磁盘地址返回过来，提交表单的时候 把这个路径存储即可

[qq_39034200]

引用 3 楼 persuit666的回复:

上传控件的这个属性show-file-list设置为false，就不显示上传附件了，然后在上传组件的on-change事件里获取到file的路径，不是已给你写示例代码了吗？图片的路径是本地浏览的路径，你存这个有意思？应该是你浏览一个文件后立马上传到服务器，上传完成后有个事件on-success，把你上传文件到服务器的磁盘地址返回过来，提交表单的时候 把这个路径存储即可

我的需求就是要存图片的本地路径或者是图片名。交任务用哒。要把要上传的图片路径或者名存到数据库中。我自己用file.name获取到了文件名，也显示到了那个左边的el-input里，但是，没法随表单提交到数据库，从springboot后台来看前台传过来的值是空的。(空的)我就是在onchang方法里，写了把file.name赋值给他左边的那个el-input，也在前端显示了，就是提交表单的时候，要提交的数据里没有值，我不知道该咋办了

[persuit666]

你的控件用的什么提交？传统的提交还是啥？没用el-form吗？
提交的时候，把vue的数据用ajax传递给后台就行了啊，都用vue了，怎么还是用传统的提交表单的方式？？