vue 中通过添加原生 input 实现文件上传

文件上传是通过 input 框 且 type = 'file' 来实现的文件上传功能，在页面标签合适位置添加

<input 
    type="file" 
    name="avatar" 
    accept="image/gif,image/jpeg,image/jpg,image/png" 
    style="display:none" 
    @change="changeImage($event)" 
    ref="avatarInput" />
<!-- 在点击上传的时候，触发上面的隐藏的 input 框的 click 事件 -->
<el-input class="fileUpload" v-model="form.content" placeholder="请输入画像ファイル" autocomplete="off"></el-input>
<el-button @click="handleSubmit">上传</el-button>

在 methods 中添加函数监听文本域的变化，通过事件对象获取上传的文件信息

handleSubmit() {
  this.$refs.avatarInput.click()
}
// 当文件域的内容改变的时候获取里面的文件信息对象
changeImage(e) {
  // 画像对象
  const file = e.target.files[0]
  this.form.content = file.name
}