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

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

需求:


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

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//将数据保存到自己设置的变量
          }
        }
      }
    },
相关文章
|
1月前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
|
9月前
|
JavaScript 前端开发 应用服务中间件
【前端项目笔记】原生js上传文件及文件转换成base64、blob类型
项目中经常会用到上传图片上传视频等功能,由于后端nginx限制,经常要进行文件转化才能上传,大文件可能还要进行切片上传处理。
459 1
|
1月前
|
前端开发
前端input上传文件获取视频或音频的时长
前端input上传文件获取视频或音频的时长
108 0
|
4月前
|
JSON 前端开发 JavaScript
前端上传文件前检测文件数据🔍
前端上传文件前检测文件数据🔍
|
6月前
|
存储 前端开发 JavaScript
前端基础 - JavaScript高级应用(用变量操纵函数)
前端基础 - JavaScript高级应用(用变量操纵函数)
25 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第三十三天-js-使用const声明变量特点
前端学习笔记202305学习笔记第三十三天-js-使用const声明变量特点2
43 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第三十三天-js-使用const声明变量特点2
前端学习笔记202305学习笔记第三十三天-js-使用const声明变量特点2
29 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第三十三天-js-使用const声明变量特点
前端学习笔记202305学习笔记第三十三天-js-使用const声明变量特点
36 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第三十三天-js-使用let声明变量的特点
前端学习笔记202305学习笔记第三十三天-js-使用let声明变量的特点
34 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第三十八天-Es6-使用let声明变量得特点1
前端学习笔记202306学习笔记第三十八天-Es6-使用let声明变量得特点1
34 0