前端上传文件保存到变量中

末蓝、 2023-09-28 12:01 68阅读 0赞

#### 需求： ####

> 用户点击上传按钮，将用户从本地上传的文件展示到页面上进行预览，没有和后端交互纯前端。

![25e40877b2354c478c2e6ec34ca8fe56.png][]

--------------------

#### 实现思路： ####

1.使用input标签做上传

<input ref="inputRef" id="data2" @click="uploadJson" type="file" />

2.监听input的change事件

input.onchange = function (e) {console.log(e)} //上传的数据在e对象里面

3.使用 FileReader()将文件解析并保存到变量，下面是具体代码，核心代码就两句

var reader = new FileReader()
    reader.readAsText(file, "utf-8")//如果乱码还可以用gbk编码

#### 实现代码： ####

uploadJson () {
          let that = this  //先拿一下this指向vue
          //页面的input属性id值，这里写自己的
          var input = document.getElementById("data2")
          input.onchange = function (da) {
            var file = da.path[0].files[0] //这个地方先打印下da,看看数据在哪里
            console.log('3333', file)
            if (true) {
              var reader = new FileReader()
              reader.readAsText(file, "utf-8")//还可以用gbk编码，我是utf8
              reader.onload = function (da) {
                that.daoRuJson = JSON.parse(da.target.result) 
                that.openOrCloEditor = true//将数据保存到自己设置的变量
              }
            }
          }
        },

[25e40877b2354c478c2e6ec34ca8fe56.png]: https://img-blog.csdnimg.cn/25e40877b2354c478c2e6ec34ca8fe56.png

发表评论取消回复

表情：

评论列表（有 0 条评论，68人围观）

还没有评论，来说两句吧...

相关阅读

相关前端上传文件保存到变量中

需求： > 用户点击上传按钮，将用户从本地上传的文件展示到页面上进行预览，没有和后端交互纯前端。 ![25e40877b2354c478c2e6ec34ca8fe56.

末蓝、/ 2023年09月28日 12:01/ 0 赞/ 69 阅读

相关前端上传图片文件到服务器 COS

平时前端上传图片都会要后端中转一下发送给资源服务器再返回路径给前端，这样势必影响效率。在开发中前端是可以直接上传资源文件到服务器上的，只不过服务器密钥（下文中Secre

柔情只为你懂/ 2023年01月15日 11:26/ 0 赞/ 184 阅读

相关前端上传文件使用FormData给后端传参

这个传参格式已经没什么说的价值了，因为从业的人肯定都用过，但是啊，但是今天有人问我了，所以再说说吧首先，先把参数转换为`new FormData()`： let

r囧r小猫/ 2022年12月30日 13:45/ 0 赞/ 250 阅读

相关 OSS上传文件返回前端上传进度三种方式

一、采用前端定时轮询请求接口注意：采用session存放文件上传进度数据，适合jsp或者模板引擎页面，但是如果前后的分离，请采用redis或者MQ(消息队列)方式，将

- 日理万妓/ 2022年12月29日 04:40/ 0 赞/ 687 阅读

相关 fastapi 上传excel文件并保存到本地

该方法的弊端：先要pd.read\_excel后在pd.to\_excel，如果excel文件过大则可能会消耗很多时间。 '''上传&训练''' @rou

柔光的暖阳◎/ 2022年11月16日 10:54/ 0 赞/ 604 阅读

相关 vue axios FormData 前端上传文件

vue 使用原生input + FormData上传文件不用表单提交，form表单提交页面会跳转 <input type="file" ref="fil

朱雀/ 2022年09月12日 01:43/ 0 赞/ 193 阅读

相关前端上传组件Plupload学习

功能和特点： 1、拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HT

客官°小女子只卖身不卖艺/ 2022年06月04日 01:55/ 0 赞/ 183 阅读

相关前端上传文件，筛选文件格式

input上传文件时，限制可选择的文件类型例如上传仅图片： <input type="file" accept="image/" /> accept表示可以

小灰灰/ 2022年06月02日 00:13/ 0 赞/ 192 阅读

相关 MultipartFile上传csv和excel文件保存到数据库中

springMVC中MultipartFile接收文件：导入CSV文件：csv->json->list<类> public List<T> readCsv

蔚落/ 2022年05月14日 07:12/ 0 赞/ 726 阅读

相关 java后端接收前端上传文件，接口访问不到

现象：前端访问后台上传文件接口没有任何返回值，只有"\{\}"。后端在上传文件接口处打断点也不进来，后来才发现后端spring-mvc没有配置多媒体解析器，导致Multipar

末蓝、/ 2022年04月10日 06:47/ 0 赞/ 1165 阅读