Element-UI上传文件前端缓存处理

时间：2023-04-05 11:20:12 HTML5

Element-UI对文件上传组件的功能主要是把文件传到后台进行处理，所以需要action作为必填属性。但是，如果需要读取本地文件，直接在前端处理，则不需要将文件传到后台，比如在本地打开一个JSON文件，在前端使用JSON文件进行动态展示，等等。下面展示具体方法：首先定义一个jsonContent，我们的目标是将本地选择的文件转换成JSON赋值给jsonContent，然后我们的模板文件就是两个组件的组合：el-dialog和el-upload:stop文件自动上传模式：auto-upload="false"LoadfromFile选择一个文件只上传jpg/png文件，且小于500kb

取消确认最后通过html5的filereader读取变量uploadFiles中的文件赋值给jsonContentif(this.uploadFiles){for(leti=0;i{尝试{letdocument=JSON.parse(e.target.result)console.log(document)}catch(err){从控制台文件加载JSON错误文档（`:${err.message}`)this.showSnackbar(`从文件中加载JSON文档错误：${err.message}`,4000)}}readAsText(file.raw)下}}为是方代码：PS：相关阅读https://developer.mozilla.org...作者：java_augur来源：CSDN原文：https://blog.csdn.net/java_au...版权声明：本文为博主原创文章，转载请附上博文链接！

上一篇：前端面试日常3+1——Day135

下一篇：低代码平台实践系列（一）：逻辑配置概述

Element-UI上传文件前端缓存处理相关文章