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

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

需求:


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

image.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()将文件解析并保存到变量,下面是具体代码,核心代码就两句

1. var reader = new FileReader()
2. 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//将数据保存到自己设置的变量
          }
        }
      }
    },
相关文章
|
6月前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
1117 1
|
JavaScript 前端开发 应用服务中间件
【前端项目笔记】原生js上传文件及文件转换成base64、blob类型
项目中经常会用到上传图片上传视频等功能,由于后端nginx限制,经常要进行文件转化才能上传,大文件可能还要进行切片上传处理。
653 1
|
5月前
|
JSON 前端开发 JavaScript
前端上传文件前校验文件数据
该文介绍了如何在Vue项目中实现批量导入Excel数据的校验。使用Element UI的`el-upload`组件上传文件,通过FileReader读取内容,结合XLSX库解析Excel为JSON。解析过程包括将二进制数据转换为workbook对象,提取worksheet并转化为JSON。之后,遍历JSON数据进行字段校验,若发现空值则记录错误。提供的Demo展示了选择Excel文件后控制台显示校验结果。技术栈包括vue 2.6.14、element ui 2.15.14和xlsx 0.17.0。建议将此类功能封装为通用组件以复用。
99 2
前端上传文件前校验文件数据
|
2月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
43 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
6月前
|
前端开发
前端input上传文件获取视频或音频的时长
前端input上传文件获取视频或音频的时长
224 0
|
4月前
|
前端开发 JavaScript 编译器
如何在CSS中写变量?一文带你了解前端样式利器
如何在CSS中写变量?一文带你了解前端样式利器
55 0
|
4月前
|
前端开发 JavaScript
前端 JS 经典:变量交换
前端 JS 经典:变量交换
19 0
|
6月前
|
前端开发
前端Vue2获取上传文件的MD5
前端Vue2获取上传文件的MD5
|
前端开发 JavaScript
前端框架中index.html中的变量语法
在 vue 或者 react 前端项目中,我们经常会在入口模板文件 index.html 中看到用 %PUBLIC_URL%、<%= BASE_URL %>、<%= title %> 之类的变量插入
294 1
|
6月前
|
JSON 前端开发 JavaScript
前端上传文件前检测文件数据🔍
前端上传文件前检测文件数据🔍
122 0