首页 > 其他分享 >VUE 项目大文件上传下载解决方案

VUE 项目大文件上传下载解决方案

时间:2023-02-14 11:47:33浏览次数:56  
标签:文件 VUE 解决方案 上传下载 WebUploader 源码 上传 下载 webuploader

 一、基本介绍 

1,什么是 WebUploader?

WebUploader 是由百度公司团队开发的一个以 HTML5 为主,FLASH 为辅的现代文件上传组件。
官网地址:http://fex.baidu.com/webuploader/

JS - 文件上传组件WebUploader使用详解2(MD5秒传、判断是否已经上传过)

2,功能特点

分片、并发:WebUploader 采用大文件分片并发上传,极大的提高了文件上传效率。
预览、压缩:WebUploader 支持常用图片格式 jpg,jpeg,gif,bmp,png 预览与压缩,节省网络数据传输。
多途径添加文件:支持文件多选,类型过滤,拖拽(文件 & 文件夹),图片粘贴功能。
HTML5 & FLASH:兼容主流浏览器,接口一致,实现了两套运行时支持,用户无需关心内部用了什么内核。
MD5 秒传:当文件体积大、量比较多时,支持上传前做文件 md5 值验证,一致则可直接跳过。
易扩展、可拆分:采用可拆分机制, 将各个功能独立成了小组件,可自由搭配。
3,安装配置
(1)首先我们访问如下地址下载最新版本,并解压放到我们的项目文件夹中。
下载地址:https://github.com/fex-team/webuploader/releases
​编辑
(2)接着在页面中将 webuploader.js 和 webuploader.css 这两个文件引入进来。其中 webuploader.css 里面内容很简单,就是定义了“选择按钮”的样式(一个蓝色按钮,具体样式见后面效果图)
注意:由于 webuploader 依赖 jQuery,所以我们项目中还需将 jQuery 引入。

   

编辑


(3)而在初始化 WebUploader 时,我们还需要指定 Uploader.swf 的地址。具体配置方法见下面的样例代码部分。
注意:Uploader.swf 是在当浏览器不支持H5的情况下的备用方案。我们只需配置好路径即可,具体采用哪种方案 WebUploader 会自动选择,同时对用户体验方面也没任何区别。

二、基本用法
1,效果图
(1)点击“选择文件”按钮选择需要上传的文件,选择完毕后在下方显示出文件名。
​编辑

(2)点击“开始上传”按钮后开始上传文件,同时在上传的过程中会有进度显示。

​编辑
(3)同时服务端在接受并保存文件后,会将接收到的一些文件信息返回过来,客户端这边将其打印到控制台中,具体内容如下。

​编辑
(4)当然我们也可以选择多个文件,然后再一起上传。
加粗样式​编辑

2,样例代码
(1)客户端代码(index.html)
 

编辑


 
  

(2)服务端代码(upload.java)
注意:客户端是通过 form 表单的形式提交的

编辑

最后为你们提供一个功能更强大的插件示例,下载前选择对应的语言版本:

控件源码下载:

asp.net源码下载jsp-springboot源码下载jsp-eclipse源码下载jsp-myeclipse源码下载php源码下载csharp-winform源码下载vue-cli源码下载c++源码下载

详细配置信息及思路

效果图:

​编辑

标签:文件,VUE,解决方案,上传下载,WebUploader,源码,上传,下载,webuploader
From: https://www.cnblogs.com/zyzzz/p/17119060.html

相关文章

  • VsCode运行VUE3出现错误
        1.首先查看vscode版本2.安装最新稳定的nodejs可以在注册表查看一些有效或者无效的路径  可以cmd查看node-v  和 npm-v3.如果出现一些提示vite......
  • vue原理:diff、模板编译、渲染过程等
    一、虚拟DOM:因为DOM操作非常消耗性能,在操作DOM时,会出现DOM的回流(Reflow:元素大小或者位置发生改变)与重绘(元素样式的改变)使DOM重新渲染。现在的框架Vue和React很少直接操作......
  • vue 锚点定位和置顶
    锚点定位//vue中使用//标题<divclass="tabs"v-for="(item,index)intitAll":key="index":class="{actives:isactive===index}"@click="ta......
  • B端业务架构解决方案
    在B端业务中常见系统模块分类为:cms系统,crm系统,会员系统,订单管理,采购管理,wms仓储管理,财务管理,供应商管理,质检系统等;常见服务:文件图片上传服务,物流服务,商品搜索服务,订单服......
  • Vue3 hash and history mode
    今天在修改hash模式为history模式的时候,发现页面在重新刷新后直接显示404了。多方排查,发现vue.config.js中有配置publicPath:'./',此配置在hash模式下是成功的,但是当......
  • vue中兄弟组件传值event bus被多次触发以及踩过的坑
    传值方式:兄弟组件传值的时候,使用的是this.$bus.$emit触发事件和this.$emit.on监听事件。业务bug:点击按钮切换兄弟组件,再切换的过程$eventBus出发了多次。原因:事件订......
  • vue基础
     vue是一套用于构建用户界面的渐进式(vue可以自底向上逐层的应用;由一个轻量小巧的核心库到可以引入各式各样的vue插件)JavaScript框架。 vue的特点:1.采用组件化模式......
  • git bash窗口创建vue项目, 箭头切换没起作用?
    1、解决方法:一、直接在命令窗口创建(Win+R),输入cmd二、使用winpty命令+.cmd,如:winptynpm.cmdcreatevite@latest  ......
  • vue为什么v-for的优先级比v-if的高?
    前言有时候有些面试中经常会问到v-for与v-if谁的优先级高,这里就通过分析源码去解答一下这个问题。下面的内容是在当我们谈及v-model,我们在讨论什么?的基础上分析的,所以......
  • 前端一面必会vue面试题总结
    Vue模板编译原理Vue的编译过程就是将template转化为render函数的过程分为以下三步第一步是将模板字符串转换成elementASTs(解析器)第二步是对AST进行静态节......