element-ui Upload前端读取上传的文件
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<el-upload
ref="upload"
action="alert"
:auto-upload="false"
:file-list="uploadFiles"
:on-change="loadJsonFromFile"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
<el-button size="small" @click="submit">上传</el-button>
data() {
return {
uploadFiles: []
}
},
methods: {
loadJsonFromFile(file, fileList) {
this.uploadFiles = fileList
},
submit() {
// 解析上传的文件
let file = this.uploadFiles[0]
let reader = new FileReader()
// abort none 中断读取
// readAsBinaryString file 将文件读取为二进制码,通常我们将它传送到后端,后端可以通过这段字符串存储文件
// readAsDataURL file 将文件读取为 DataURL,一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件
// readAsText file, [encoding] 将文件读取为文本,读取的结果即是这个文本文件中的内容
reader.readAsText(file.raw)
// onabort 中断时触发
// onerror 出错时触发
// onload 文件读取成功完成时触发
// onloadend 读取完成触发,无论成功或失败
// onloadstart 读取开始时触发
// onprogress 读取中
reader.onload = (e) => {
// 读取文件内容
const fileString = e.target.result
// 接下来可对文件内容进行处理
}
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)