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>

因此，当您从服务器接收图像名称时，您可以使用它在虚假输入中显示，当用户选择带有此输入的文件时，也会显示其实际选择的文件名。