文件上传是通过 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
}
GitHub 加速计划 / vu / vue
108
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐