在文件输入显示器中显示文件名称

Question

基本上，我想要做的是从服务器获取数据并显示在我的项目更新页面上。因此，在这里，我有一张图片可以显示，是的，它显示在<div>中以显示Taylor Swift的图像。但是，我有一个问题，我找不到在文件输入中显示文件名的方法。 （见下图）

因此，预期的行为是，从服务器中的数据得到的文件名，将显示在输入本身。例如。 taylorswift.jpeg

有没有什么办法可以做到这一点使用JavaScript？目前正在进行VueJS 2项目。

Answer 1

由于安全原因，文件输入字段不允许以编程方式选择文件或设置当前选定的文件名。但是，您可以使用一些方法创建一种假输入字段，其中在隐藏文件输入字段中嵌入了一个按钮元素，如this sample中所示。

<button class="fake-file__input-col"> 
    <input type="file" class="fake-file__input" @change="onFileInputChange"/> 
</button> 

所以，当你从服务器接收图像的名称，你可以用它在你的假输入显示，当用户选择与此输入一个文件，他的实际选择的文件名会显示出来。