精华内容
下载资源
问答
  • vue中的文件上传主要分为两步:前台获取到文件提交到后台 获取文件 前台获取文件,主要是采用input框来实现 <input type="file" ref="clearFile" @change="getFile($event)" multiple="multiplt" class=...

    vue中的文件上传主要分为两步:前台获取到文件和提交到后台

    获取文件

    前台获取文件,主要是采用input框来实现

       <input type="file" ref="clearFile" 
       @change="getFile($event)" multiple="multiplt" 
       class="add-file-right-input"
       style="margin-left:70px;" accept=".docx,.doc,.pdf">
    
    通过file类型的input框实现文件上传;然后通过设置
    multiple="multiplt"实现了多文件上传,并且使用accept
    实现了上传文件类型限制;最后通过监听change事件,
    前台获取到上传的文件。
    
     getFile(event){
               var file = event.target.files;
               for(var i = 0;i<file.length;i++){
                //    上传类型判断
                   var imgName = file[i].name;
                    var idx = imgName.lastIndexOf(".");  
                    if (idx != -1){
                        var ext = imgName.substr(idx+1).toUpperCase();   
                        ext = ext.toLowerCase( ); 
                         if (ext!='pdf' && ext!='doc' && ext!='docx'){
                           
                        }else{
                              this.addArr.push(file[i]);
                        }   
                    }else{
    
                    }
               }
           },
    通过change事件中的event.target.files就能获取到上传的文件了,
    在上面再次对获取的文件进行了类型限制。       
    

    下一步数据提交

    
     获取到文件数据后,就需要将数据提交到后台,
     这里可以采用FormData的方式提交。
    
    submitAddFile(){
               if(0 == this.addArr.length){
                 this.$message({
                   type: 'info',
                   message: '请选择要上传的文件'
                 });
                 return;
               }
    
                var formData = new FormData();
                formData.append('num', this.addType);
                formData.append('linkId',this.addId);
                formData.append('rfilename',this.addFileName);
                for(var i=0;i<this.addArr.length;i++){
                    formData.append('fileUpload',this.addArr[i]);
                }
              let config = {
                headers: {
                  'Content-Type': 'multipart/form-data',
                  'Authorization': this.token
                }
              };
              this.axios.post(apidate.uploadEnclosure,formData,config)
                .then((response) => {
                    if(response.data.info=="success"){this.$message({
                            type: 'success',
                            message: '附件上传成功!'
                        });
                    }
                })
            }
    在进行数据提交的时候,有两点需要注意:
    formData对象和Content-Type,处理好着两点以后,就和其他的接口一样了。
    

    文件下载

    首先是从服务器获取文件列表,并展示:

    <div class="about-file">
        <div class="about-file-title">相关材料</div>
        <ul>
            <li v-for="(item, index) in tenEnclosure.rows" :key="index">
                  <a target="_self" >{{item.tenPencSourname}}</a>
                  <span @click="toxiazai(index,4,item.tenureId)" title="下载"></span>
                  <span @click="toshanchu(index,4,item.tenureId)" title="删除"></span>
           </li>
       </ul>
    </div>
    

    点击下载事件

    toxiazai(index,num,id){
              var tempForm = document.createElement("form");//创建form表单,以下数form表单的各种参数
              tempForm.id = "tempForm1";
              tempForm.method = "post";
              tempForm.action = apidate.downloadEnclosure;
              tempForm.target="_";
              var hideInput1 = document.createElement("input");
              hideInput1.setAttribute('type','hidden');
              hideInput1.setAttribute('name','linkId');
              hideInput1.setAttribute('id','linkId');
              hideInput1.setAttribute('value',id);
              tempForm.appendChild(hideInput1);
    
              var hideInput2 = document.createElement("input");
              hideInput2.setAttribute('type','hidden');
              hideInput2.setAttribute('name','num');
              hideInput2.setAttribute('id','num');
              hideInput2.setAttribute('value',num);
              tempForm.appendChild(hideInput2);
    
    
              if(document.all){
                tempForm.attachEvent("onsubmit",function(){});        //IE
              }else{
                var subObj = tempForm.addEventListener("submit",function(){},false);    //firefox
              }
              document.body.appendChild(tempForm);
              if(document.all){
                tempForm.fireEvent("onsubmit");
              }else{
                tempForm.dispatchEvent(new Event("submit"));
              }
              tempForm.submit();//提交POST请求
              document.body.removeChild(tempForm);
    },
    

    文件在线打开

    在PC端,有很多文件都试采用下载的方式,但是在手机端,更多的是直接在线打开。如果要实现文件的在线打开,可以借助于a标签的href属性实现

    <ul>
         <li v-for="(item,index) in noticeList"  v-bind:key="index"
          class="person-list" @click="notice(index)">
              <div class="person-list-name">
                  <a v-bind:href="[filePrefix+item.uuid_name]">
                  {{item.file_name}}</a>
             </div>
             <div class="person-list-time">上传时间:
             {{item.create_time}}</div>
         </li>
    </ul>
    
    因为使用这种方式进行文件打开的时候,需要有完整的路径名称,
    但是在从后台获取到列表的时候,通常是相对路径,所以需要进行路径拼接
    v-bind:href="[filePrefix+item.uuid_name]"
    

    图片上传和预览

    通过在上传文件以后,就可以拿到文件的名称进行展示。
    但是如果是用这种方式进行图片上传,展示不再是图片名称了
    ,而应该是图片展示。
    例如,要实现上面这种效果,使用input进行图片上传
    例如,要实现上面这种效果,使用input进行图片上传

    <div class="list-img">
                    <ul>
                        <li v-for="(item,index) in imgArr" :key="index">
                            <img :src="item.path" alt="" >
                            <a @click="todel(index)"></a>
                        </li>
                        <li>
                            <div class="addImg" v-if="imgArr.length<3">
                                <span class="add">上传图片</span>
                                <span class="add">(最多上传3张)</span>
                                <input  type="file"  @change="getFile($event)"  accept=".jpg,.png,.bmp,.gif">
                            </div>
                        </li>
                    </ul>
                </div>
    
    getFile(event){
                var file = event.target.files;
                for(var i = 0;i<file.length;i++){
                   // 上传类型判断
                    var imgName = file[i].name;
                    var idx = imgName.lastIndexOf(".");  
                    if (idx != -1){
                        var ext = imgName.substr(idx+1).toUpperCase();   
                        ext = ext.toLowerCase( ); 
                        if (ext!='jpg' && ext!='png' && ext!='bmp' && ext!='gif'){
                            
                        }else{
                                this.imgArr.push(file[i]);
                        }   
                    }else{
    
                    }
                }
            },
    
    因为在打印event对象的时候,发现上传的图片中包含一个path字段,
    对应的就是图片在设备上地址,就想当然的以为可以用这种方式展示图片,
    结果很显然的报错了,在网上查了一下才知道,要展示使用input上传的图片
    ,需要使用FileReader。
    
    具体的就是,input获取到的图片,是不能立即展示的,两者根本不是一回事
    ,所以,还需要一个数组,用来存放展示的图片
    
    getFile(event){
                var file = event.target.files;
                let that = this;
                for(var i = 0;i<file.length;i++){
                   // 上传类型判断
                    var imgName = file[i].name;
                    var idx = imgName.lastIndexOf(".");  
                    if (idx != -1){
                        var ext = imgName.substr(idx+1).toUpperCase();   
                        ext = ext.toLowerCase( ); 
                        if (ext!='jpg' && ext!='png' && ext!='bmp' && ext!='gif'){
                            
                        }else{
                                that.imgArr.push(file[i]);
                        }   
                    }else{
    
                    }
                    //展示上传的图片
                    let reader = new FileReader()
                    reader.readAsDataURL(file[i])
                    reader.onload = function(e) {
                        that.imgShow.push(this.result);
                    }
                }
            },
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • Vue实现文件上传和文件下载

    万次阅读 多人点赞 2018-08-22 22:09:55
    文件下载文件下载通常有几种方法 1.通过url下载 2.location.href 3.form提交直接下载 4.HTML5 a.download结合blob对象进行下载 第一种方式: 第一种方法是前后端的接口只给了一个API请求: 前端第一个...

    文件下载:
    文件下载通常有几种方法
    1.通过url下载
    2.location.href
    3.form提交直接下载
    4.HTML5 a.download结合blob对象进行下载
    第一种方式:
    第一种方法是前后端的接口只给了一个API请求:
    前端第一个实现是使用a标签,

    第二种方式:
    这个方法是直接把 DataURLs 或者 BlogURLs 传到浏览器地址中触发下载。有两种方式:

    window.location.href = urls; // 本窗口打开下载
    window.open(urls, '_blank'); // 新开窗口下载
    

    第三种:
    标签的download是HTML5标准新增的属性,作用是指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。
    这种是定义的接口不是下载文件的路径,而是通过API可以获得文件的内容,由前端把内容写入到文件中,这种方法是通过获取文件信息,在网页上利用click事件,创建一个文件,然后将文件信息写入到文件中,然后保存

          this.content = content
          this.filename = filename
          const blob = new Blob([this.content])
          if (window.navigator.msSaveOrOpenBlob) {
            // 兼容IE10
            navigator.msSaveBlob(blob, this.filename)
          } else {
            //  chrome/firefox
            let aTag = document.createElement('a')
            aTag.download = this.filename
            aTag.href = URL.createObjectURL(blob)
            aTag.click()
            URL.revokeObjectURL(aTag.href)
          }
    

    第四种form表单
    不需要我们处理返回二进制流直接下载,非常方便
    form的action设置为接口地址,method设置为post,Post到后台的数据设置为input的属性 name = key,value = value的形式,如果有多个key、value的值要传递,那么就设置多个input来分别储存单个的key、value;
    如果请求的接口可以不需要参数,那么input还是必须要一个,如果不要得话 会引起接口报错
    原理:form的action相当于一个浏览器本页签/页面的一个请求,不会被后台,前台的路由拦截。所以能够提交成功。

    注意点:如果设置method为get,在action中的uri添加了参数的话,想用这个参数替代input的key、value形式来提交到后台,这参数是没有效果的,后台拿不到这些参数,真正的参数还是以input的name、value的形式储存,在submit方法执行后传递到后台。
    这样我们就是实现了文件下载,但是表单提交的数据一般是简单的键值对,如果传参比较复杂可以考虑将表单序列化提交。

    因为项目是基于vue的,而且提交的请求参数涉及很多参数,比较复杂,所以采用了方法三来实现

          axios.post('/rest/inventory/oh_status/info/excel', {
            site: this.selectedsite,
            bu: this.selectedbu,
            ohHealthStatus: this.selectedtitle,
            ohHealthRootcause: this.selectedblock,
            search: this.search,
            sort: this.sort
          }, {responseType: 'arraybuffer'}).then(this.ExportFile).catch(function (error) {
            console.log(error)
          })
    
         this.content = content
          this.filename = filename
          const blob = new Blob([this.content])
          if (window.navigator.msSaveOrOpenBlob) {
            // 兼容IE10
            navigator.msSaveBlob(blob, this.filename)
          } else {
            //  chrome/firefox
            let aTag = document.createElement('a')
            aTag.download = this.filename
            aTag.href = URL.createObjectURL(blob)
            aTag.click()
            URL.revokeObjectURL(aTag.href)
          }
    

    注意我们发送请求的时候一定要写上responseType,{responseType: 'arraybuffer'} 否则下载下来的文件打不开!!!

    文件上传
    文件上传通常使用form表单,但是有时候我们不想要用表单,ES6的fromData来实现

        handleGetFile (data) {
          this.file = data
          let formdata = new FormData()
          formdata.append('file', this.file)
          formdata.append('submit', false)
          let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          axios.post('/rest/master_data/ct2r/odin_delivery_metrics/cvc/file_upload_review', formdata, config).then(this.sendFileSucc)
        },
    

    首先 我们获取完文件之后,创建FormData对象,配置头部,发送该请求就OK了,别忘了让后台将接收头部请求改为formdata的格式

    如果文件是图片或者视频的话,部分浏览器会直接打开,非下载,这个时候我们可以在下载链接 url 后面加上 ?response-content-type=application/octet-stream 这个参数可以实现点击下载功能。

    展开全文
  • vue实现文件上传和文件下载 转载于:https://www.cnblogs.com/knuzy/p/9569167.html

    vue实现文件上传和文件下载

    转载于:https://www.cnblogs.com/knuzy/p/9569167.html

    展开全文
  • 4GB以上超大文件上传和断点续传服务器的实现 随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求。 但是在很多情况下,平台运营方并没有大文件上传和...

    4GB以上超大文件上传和断点续传服务器的实现

    随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求。

    但是在很多情况下,平台运营方并没有大文件上传和断点续传的开发经验,往往在网上找一些简单的PHP或者Java程序来实现基本的上传功能,然而在实际使用中会发现,这些基于脚本语言实现的上传功能模块性能很弱,一是不支持2GB以上的内容上传;二是无法支持断点续传;三是效率极低,单台服务器最多支持几十个并发上传连接。

    当前我们要搭建一个运营级的视频服务平台,在尝试了各种产品均无法满足要求,因此最后花精力自主用C++语言实现了这一高性能上传服务器。 

    项目地址:

    http://git://10.168.4.241/up6/web/asp.net.git

    Hyper Upload Server 超级上传服务器 

    这是一款超级文件上传服务器,采用异步I/O架构,采用C++语言编码实现。它支持4GB以上超大文件上传和断点续传,支持Windows和Linux服务器平台,支持任意格式的文件上传,尤其适合大的视频网站应用。单台服务器支持1000并发上传进程,支持PC端和智能手机端主流的浏览器。 

    主要特性

    1. 服务器端采用异步I/O架设设计,具有高性能I/O处理能力,尤其适用于超大文件上传;

    2. 服务器端采用高效内存分配技术确保在运行过程中服务器的内存开销最小化;

    3. 完全采用标准协议实现,因此兼容几乎所有的PC端和移动端浏览器;

    4. 服务器端采用C++语言自主实现,对上传文件的尺寸无限制,天生支持超大文件上传。

       而基于PHP、JAVA等技术实现的文件上传服务天生无法支持超大文件上传,无法逾越2GB的最大文件尺寸瓶颈;

    5. 服务器端采用无缓冲即时写入方式,上传数据写入一步到位。不同于PHP、JAVA等技术实现方式需要两步写入;

    6. 服务器端可跨平台编译运行,支持Windows和Linux平台;

    7. 高性能,单台服务器支持1000个并发上传进程;

    8. 支持4GB以上超大文件上传,文件大小不受限制;

    9. 客户端支持采用HTTP标准协议上传;

    10.支持断点续传,断网、关机重启均不受影响;

    11.支持HTML5浏览器上传进度实时显示;

    12.支持IE8及以上浏览器上传进度显示;

    13.支持查看客户端在线连接, 查看方法: http://ip:port/lists

    14.多浏览器兼容,包括Chrome,Firefox,Safari,IE,Opera,Edge; 

    安装 

    第一步:解压文件到一个硬盘目录,例如d:\UploadServer 

    第二步:修改配置文件

             修改d:\UploadServer\conf\config.xml,文件里的目录设置,

             将所有 dir= 变量指向的目录修改为硬盘上的真实目录,如果没有就按配置文件创建;       

    第三步:安装服务

          执行cmd打开命令行窗口按步骤输入以下命令:

          d:  <br/>

          cd UploadServer

          HYFileServer.exe -i  

    第四步:启动服务

        打开系统的服务管理器,找到Hyper Http Upload Service服务启动它。

    第五步:在浏览器里输入 http://127.0.0.1:8080 查看服务器运行是否正常

        如果上传页面正常显示说明安装成功

        点击其中一个上传文件链接 按钮来上传一个文件。

        如果要在其它主机上访问上传服务器页面,请将127.0.0.1用安装服务器的IP地址取代。

        如果外部机器还不能访问,请检查防火墙的设置,看一下默认的8080端口是否开启。

         

    第六步:如果要进一步了解上传服务器,请查看 d:\UploadServer\doc\文件上传服务器使用手册.pdf 文件。

    – Linux 下执行安装

    ./hyupdsrv

    如果要作为守护进程,执行

    ./hyupdsrv -d 

    详细配置可以参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/08/09/%e5%be%80%e6%9c%8d%e5%8a%a1%e5%99%a8%e4%b8%8a%e4%bc%a0%e5%a4%a7%e6%96%87%e4%bb%b6/ 
    欢迎入群一起讨论:374992201

    展开全文
  • SpringBoot+Vue实现文件上传和下载、支持多文件和文件夹。
  • HTTP协议本身不支持断点上传,需要自己实现。 二、Range 用于请求头中,指定第一个字节的位置最后一个字节的位置,一般格式: Range:用于客户端到服务端的请求,可以通过改字段指定下载文件的某一段大小...
  • 前言: 我今天在实现一个文件上传下载的功能,遇到了一些坑,现在都已经解决了,所以来记录一下。 上传的坑: 我用的是elementUI的组件库里面自带上传。 我们先来看一下这个组件的基本用法 <el-upload class=...
  • 需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整配置,自己将大小都以501M来进行限制。 第一步: 前端修改 由于项目使用的是BJUI...
  • 一、文件上传 <el-input v-model="fileName"></el-input> <el-button @click="choseFile" plain ><span class="upLoad iconfont icon-shangchuan"></span >点击上传</el-...
  • 前端使用vue并且想使用url访问图片资源 后端使用springboot并且想把图片资源存储在resource下 后端配置 #application.yml #借鉴地址: https://blog.csdn.net/lorogy/article/details/103918934 spring: # ...
  • 1.文件下载 方法一:适合无参数的下载,有局限性 vue中: template: <el-button @click="exportDoc" icon="el-icon-download">下载模板</el-button> scripte: exportDoc() { let me = this; ...
  • 前端使用vue并且想使用url访问图片资源 后端使用springboot并且想把图片存储在项目根路径下 后端配置 需要创建配置文件,允许通过url直接访问文件资源 package io.renren; import org.springframework.context...
  • 一、创建vue项目 npm i axios -S <template> <div class="hello"> <!-- 标题 --> <h1>AirPort</h1> <!-- 选择文件 --> <div id="show" v-show="isShow"> <div ...
  • vue中的文件上传主要分为两步:前台获取到文件提交到后台 获取文件 前台获取文件,主要是采用input框来实现 <el-dialog :title="addName" :visible.sync="dialogAddFile" width="500px" style="padding:0;...
  • 需求页面中增加下载示例按钮实现一块区域能够拖拽上传word文件,限制文件大小2MB和文件类型,能显示进度条,同时支持取消上传文件下载业务中要求的是示例放在静态文件夹中,并不需要请求后台。针对这种场景,笔者...
  • 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验; 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包含层级结构。 支持...
  • Vue实现Excel模板文件上传下载

    千次阅读 2020-05-20 11:21:20
    Vue实现Excel模板文件上传下载 一.前言 越来越多的项目开始使用前后端分离的方式来进行开发了,前端使用的vue来进行页面处理的,所以正常的文件下载和上传肯定是少不了的,因为这也是自己第一次使用vue来进行...
  • js+css实现手机端的多图片上传,为了方便使用,cssjs都未内联,为性能建议使用时改为外联; 如要用到pc端,直接去掉px转换为rem的js代码,修改单位即可; 因multiple在安卓手机中不兼容,所以在安卓上只能一次选中...
  • 一、 功能性需求与非...支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验; 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包含层级结构。 支持断点续传,关闭浏览器或刷新浏
  • 原文连接 个人心得: 1、前端需要发送http请求到后端 2、后端用接受到请求之后,返回一个FileContentResult类型,提醒浏览器下载
  • 使用Vue和Spring Boot实现文件下载

    千次阅读 热门讨论 2020-11-11 23:21:50
    使用Vue和Spring Boot实现文件上传。 前端 这里介绍三种方式来实现文件下载,跨域问题在后端会进行处理,这个例子是下载MP4文件,我这里是直接使用HTML来写前端,如果用Vue来写,可能要防止mockjs对请求的response...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 139
精华内容 55
关键字:

vue实现文件上传和下载

vue 订阅