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

原创已于 2022-03-23 14:37:14 修改 · 5.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2021-12-30 17:45:00 首次发布

vue 同时被 2 个专栏收录

35 篇文章

订阅专栏

javaScript

30 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue项目中实现文件上传功能，通过隐藏的input标签结合事件监听，实现了文件选择和读取。在文件改变时，利用FileReader API将文件转换为base64并进行预览，同时更新表单内容。用户点击上传按钮时触发文件输入框的点击事件，确保用户体验流畅。

文件上传是通过 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
}