选择文件：文件选择框的代码触发【极易版】【文件上传功能】

最近业务中遇到添加附件功能，点击对应元素，在特定条件下触发文件选择，然后将选中的文件上传到后台。
文件上传是使用阿里云实现的，这里主要说文件选择功能。也就是怎样添加附件到界面上。

一 简单实现——点击按钮触发图片选择框

首先想到的是input中的type=‘file’，可以触发文件选择，并且获取到文件列表。

<input type="file" id="file" multiple="multiple" @change="handleFile">input>

这样界面上就会出现一个选择文件的按钮，点击按钮弹出文件选择框。
如果需求简单的话，在此基础上改改input按钮的样式，就可以完成一个文件选择功能了。

在handleFile方法中，我们可以获取file列表，将列表中的文件信息push到我们的变量中备用即可。

handleFile(val) {
  console.log(val.target.files[0].name); // 文件名字
  this.filesList.push(...val.target.files);
},

二 高级实现——使用代码触发图片选择框

但有事我们不需要固定的选择文件按钮，我们需要在一定条件下触发文件选择，这时就需要一点技巧了。
我们可以使用下面两种方式来创建一个隐藏的input文件选择器。

<--vue环境-->
<input v-show="false" type="file" id="file" multiple="multiple" @change="handleFile">input>

<--通用环境-->
<input style="display: none;" type="file" id="file" multiple="multiple" @change="handleFile">input>

在需要进行文件选择的时候，我们触发该隐藏元素的click事件即可。

<--vue环境-->
<input v-show="false" type="file" id="file" multiple="multiple" @change="handleFile">input>
<div class="add_job_attach_subtitle" @click="addJobAttach">
  <img class="add_job_attach_subtitle_icon" src="@/assets/imgs/homework/add.png" />
  <div>添加作业附件div>
div>

打开界面，可以看到界面中input按钮是不展示的，只展示下面添加作业附件的元素。
然后我们在下面元素的点击事件——addJobAttach方法中触发input按钮的click事件。

addJobAttach() {
  document.getElementById("file").click();
},

可以看到文件选择框正常弹出了。

input框的change事件——handleFile方法仍然会原样触发，我们在里面获取文件列表即可。

这里实际上是采取的取巧的方式去实现，如果你又更好的方式，可以在评论区给出。