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) {
  // 画像对象
  let that = this
  // 文件对象
  const file = e.target.files[0]
  var reader = new FileReader();
  reader.onload = function(e){
  	// 文件的 base64
    that.dataURL = e.target.result
    that.dataURL = that.dataURL.replace(/^data:\w+\/\w+;base64,/, '')
    // base64 to base64url
    that.dataURL = Base64.fromUint8Array(Base64.toUint8Array(that.dataURL), true);
  }
  reader.readAsDataURL(file);
  that.form.content = file.name
}