vue 中通过添加原生 input 实现文件上传
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
文件上传是通过 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
}
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 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)