怎么在Element-UI中使用Upload上传文件前端缓存处理
怎么在Element-UI中使用Upload上传文件前端缓存处理？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
在做网站、网站设计中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手，突出企业的产品/服务/品牌，帮助企业锁定精准用户，提高在线咨询和转化，使成都网站营销成为有效果、有回报的无锡营销推广。创新互联专业成都网站建设十载了，客户满意度97.8%，欢迎成都创新互联客户联系。
首先定义一个jsonContent, 我们的目标是将本地选取的文件转换为JSON赋值给jsonContent
然后我们的模板文件是利用el-dialog和el-upload两个组件组合：这里停止文件自动上传模式:auto-upload="false"
Load from File
Select a file
upload only jpg/png files, and less than 500kb
cancel
confirm
最后通过html5的filereader对变量uploadFiles中的文件进行读取并赋值给jsonContent
if (this.uploadFiles) {
for (let i = 0; i < this.uploadFiles.length; i++) {
let file = this.uploadFiles[i]
console.log(file.raw)
if (!file) continue
let reader = new FileReader()
reader.onload = async (e) => {
try {
let document = JSON.parse(e.target.result)
console.log(document)
} catch (err) {
console.log(`load JSON document from file error: ${err.message}`)
this.showSnackbar(`Load JSON document from file error: ${err.message}`, 4000)
}
}
reader.readAsText(file.raw)
}
}为方便测试，以下是完整代码：
Load from File
Select a file
upload only jpg/png files, and less than 500kb
cancel
confirm
关于怎么在Element-UI中使用Upload上传文件前端缓存处理问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
