vue实现文件上传读取及下载功能

本文实例为大家分享了vue实现文件上传读取及下载的具体代码,供大家参考,具体内容如下

文件的上传利用input标签的type="file"属性,读取用FileReader对象,下载通过创建a标签实现

<template>
 <div class="filediv">
  <el-button @click="downloadFile">下载</el-button>
  <div id="fileselect">
   <el-input style="margin-top: 16px" type="file"></el-input>
  </div>
 </div>
</template>

<script>
export default {
 data () {
  return {
  }
 },
 mounted: function () {
  this.$nextTick(function () {
   this.readFile()
  })
 },
 methods: {
  // 下载文件
  downloadFile: function () {
   var content = [
    { 'firstName': 'John', 'lastName': 'Doe' },
    { 'firstName': 'Anna', 'lastName': 'Smith' },
    { 'firstName': 'Peter', 'lastName': 'Jones' }
   ]
   var filecontent = JSON.stringify(content)
   if ('download' in document.createElement('a')) {
    this.download(filecontent, 'testfile.json')
   } else {
    alert('浏览器不支持')
   }
  },
  // 下载设备配置文件
  download: function (content, filename) {
   let link = document.createElement('a')
   link.download = filename
   link.style.display = 'none'
   // 字符内容转变成blob地址
   let blob = new Blob([content])
   link.href = URL.createObjectURL(blob)
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
  },
  // 导入设备,监听上传文件并读取
  readFile: function () {
   console.log('读取文件')
   let fileselect = document.querySelector('#fileselect')
   fileselect.addEventListener('change', function (e) {
    console.log(e)
    let file = e.target.files
    console.log('文件类型')
    console.log(file)
    if (file.length === 0) {
     return
    }
    let reader = new FileReader()
    if (typeof FileReader === 'undefined') {
     this.$message({
      type: 'info',
      message: '您的浏览器不支持FileReader接口'
     })
     return
    }
    reader.readAsText(file[0])
    reader.onload = function (e) {
     console.log('文件内容')
     console.log(e.target.result)
    }
   }.bind(this))
  }
 }
}
</script>

<style scoped>
.filediv {
 width: 400px;
 margin: 20px;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)

    vue-cli+axios实现附件上传下载记录: 上传: 这里用formData格式传递参数:请求成功后后台返回上传文件的对应信息. 重点是下载: ############## downloadfile(res) { var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //applicati

  • vue实现Excel文件的上传与下载功能的两种方式

    一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 <el-col style="padding: 10px 0 20px;"> <el-button class="pull-right" icon="el-icon-upload" type=&qu

  • vue实现文件上传读取及下载功能

    本文实例为大家分享了vue实现文件上传读取及下载的具体代码,供大家参考,具体内容如下 文件的上传利用input标签的type="file"属性,读取用FileReader对象,下载通过创建a标签实现 <template> <div class="filediv"> <el-button @click="downloadFile">下载</el-button> <div id="fil

  • springboot+vue实现文件上传下载

    本文实例为大家分享了springboot+vue实现文件上传下载的具体代码,供大家参考,具体内容如下 一.文件上传(基于axios的简单上传) 所使用的技术:axios.springboot.vue; 实现思路:通过h5 :input元素标签进行选择文件,获取所选选择的文件路径,new fromdata对象,设置fromdata的参数,设置axios对应的请求头,最后通过axios发送post请求后端服务.后端服务同过MultipartFile进行文件接收.具体代码如下: 前端代码: 1.创建v

  • vue实现文件上传和下载

    本文实例为大家分享了vue实现文件上传和下载的具体代码,供大家参考,具体内容如下 文件上传 vue中的文件上传主要分为两步:前台获取到文件和提交到后台 获取文件 前台获取文件,主要是采用input框来实现 <el-dialog :title="addName" :visible.sync="dialogAddFile" width="500px" style="padding:0;" @close="reset

  • VUE+element-ui文件上传的示例代码

    目录 图片上传(ImageCropper) 文件上传(el-upload) 注意 图片上传(ImageCropper) 此前端代码自己封装了文件上传,只需要配置后端接口需求URL以及对应的图片上传成功后的处理函数,后端返回OSS生成的图片访问地址,然后cropsuccess函数将上传成功的图像进行显示. <template> <div class="app-container"> <!-- 讲师头像 --> <el-form-item labe

  • vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)

    目录 需求 实现需求 1.利用on-preview+window.open()实现简易版预览效果 2.封装组件实现更完整的上传完成.预览功能 追加关于问的比较多的问题回复 1.imgsrc路径 2.显示原本elementui的那个上传样式 3.file.response显示没有这个属性和方法 4.https://view.officeapps.live.com/op/view.aspx?src=${data}是干嘛的?预览PDF需要安装其他的插件吗? 总结 需求 最近在做vue2.0+eleme

  • IE8+SpringMVC文件上传防止JSON下载

    今天在IE8测试文件上传的时候发现总是提示下载,原因是上传接口返回的是json,通过以下修改就可以保证返回是json并且不会出现下载的情况: 同时适用于当设置SPRING 视图解析器的时候,不能去掉@responseBody的问题 @RequestMapping(value = "/batchUpload", method = RequestMethod.POST,produces = "text/json;charset=UTF-8") @ResponseBody

  • node+vue实现文件上传功能

    本文实例为大家分享了node+vue实现文件上传的具体代码,供大家参考,具体内容如下 *后端* const express = require('express'); const Router = express.Router(); const multer = require('multer'); const fs = require('fs'); const pathLib = require('path'); const videoModel = require('../../models

  • Vue 大文件上传和断点续传的实现

    文件上传的 2 套方案 基于文件流(form-data) element-ui 框架的上传组件,就是默认基于文件流的. 数据格式:form-data: 传递的数据: file 文件流信息:filename 文件名字 客户端把文件转换为 base64 通过 fileRead.readAsDataURL(file) 转为 base64 字符串后,要用 encodeURIComponent 编译再发送, 发送的数据经由 qs.stringify 处理,请求头添加 "Content-Type"

  • vue实现文件上传

    本文实例为大家分享了vue实现文件上传的具体代码,供大家参考,具体内容如下 记录问题,方便回顾 1.使用elementUI的 el-upload插件进行上传. 2.使用input. 1.使用elementUI的 el-upload插件进行上传. html: <el-upload           ref="avatar-uploader"           class="avatar-uploader"           :show-file-list=

  • JQ图片文件上传之前预览功能的简单实例(分享)

    1.先准备一个div onchange触发事件 <input type="file" onchange="preview(this)" ></span> <div id="preview"></div> 2.写JS代码 //上传图片之前预览图片 function preview(file){ if (file.files && file.files[0]){ var reader =

随机推荐