详解Element-UI中上传的文件前端处理-创新互联

Element-UI对于文件上传组件的功能点着重于文件传递到后台处理，所以要求action为必填属性。但是如果需要读取本地文件并在前端直接处理，文件就没有必要传递到后台，比如在本地打开一个JSON文件，利用JSON文件在前端进行动态展示等等。
下面就展示一下具体做法：

公司主营业务：成都网站建设、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出黄山免费做网站回馈大家。

首先定义一个jsonContent, 我们的目标是将本地选取的文件转换为JSON赋值给jsonContent

然后我们的模板文件是利用el-dialog和el-upload两个组件组合：这里停止文件自动上传模式:auto-upload="false"

 <el-button type="primary" @click="dialogVisible = true">Load from File</el-button>
 <el-dialog title="Load JSON document from file" :visible.sync="dialogVisible">
  <el-upload :file-list="uploadFiles" action="alert" :auto-upload="false" multiple :on-change="loadJsonFromFile">
   <el-button size="small" type="primary">Select a file</el-button>
   <div slot="tip">upload only jpg/png files, and less than 500kb</div>
  </el-upload>
  <span slot="footer">
   <el-button type="primary" @click="dialogVisible = false">cancel</el-button>
   <el-button type="primary" @click="loadJsonFromFileConfirmed">confirm</el-button>
  </span>
 </el-dialog>

网页名称：详解Element-UI中上传的文件前端处理-创新互联
链接地址：https://www.cdcxhl.com/article44/dijsee.html

成都网站建设公司_创新互联，为您提供外贸网站建设、网站制作、网站维护、网站策划、自适应网站、网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联