vue 中通过添加原生 input 实现文件上传
文件上传是通过 input 框 且 type = 'file' 来实现的文件上传功能,在页面标签合适位置添加<inputtype="file"name="avatar"accept="image/gif,image/jpeg,image/jpg,image/png"style="display:none"@change="changeImage($event)"ref="avatarInpu
·
文件上传是通过 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
}
更多推荐
已为社区贡献6条内容
所有评论(0)