请问怎样编辑input里面的类型type="file" 的显示名字呢？

Question

请问怎样编辑input里面的类型type="file" 的显示名字呢？设置value不行。
我的需求是：手动选择文件。并导入到下面的输入框中。不需要上传到服务器。编辑完之后再手动上传即可。

我的问题是：
之前我把2个步骤分开写的：先点前面的按钮选择文件。再点后面的按钮导入文本。

但是现在需要我把这个2个按钮合并在一起。在选择文件之后。直接导入文本。
我之前用的方法是：
<input type="file" class="file"/>加上一个el-button
**现在合并的话使用el的上传组件似乎不行。因为我不需要上传到服务器。
而且我想修改input里面文字，默认显示的是：选择文件。但是我想显示成：选择文件并上传。但是不知道如何修改这个input的属性？请问还有没有其他方法或者插件可以实现我的功能呢？**

如图：

Answer 1

你可以把点击input的逻辑放到点击“导入文本”按钮中，如：

importText() {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.txt'
  input.click()
  input.addEventListener('input', ($e) => {
    const file = $e.target.files[0]
    // 处理文件逻辑
  })
}

Answer 2

https://developer.mozilla.org...

看下这个 API

Answer 3

你把默认的input隐藏一下，然后你自己搞个span来显示。至于你说的input单击问题，有两个方案

1. input透明浮起来
2. label标签的for属性