在Vue项目中使用WebUploader实现文件上传

时间：2023-03-31 01:42:30 CSS

简介：WebUploader是百度WebFE（FEX）团队开发的一款以HTML5为主，FLASH为辅的简单现代文件上传组件。在不抛弃主流IE浏览器的情况下，可以充分发挥HTML5在现代浏览器中的优势。它使用原始的FLASHruntime，兼容IE6+、iOS6+、android4+。两组运行时的调用方式相同，用户可以随意选择。大文件分片并发上传，大大提高文件上传效率。分片、并发分片和并发相结合，将一个大文件分成多个块并发上传，大大提高了大文件的上传速度。当网络问题导致传输错误时，只需要重传错误的段，而不是整个文件。另外，分片传输可以实时跟踪上传进度。预览与压缩支持常用图片格式jpg、jpeg、gif、bmp、png预览与压缩，节省网络数据传输。解析jpeg中的meta信息，对各种方向做正确处理，压缩后上传图片的所有原始meta数据。多种方式添加文件，支持多文件选择、类型过滤、拖放（文件&文件夹）、图片粘贴功能。粘贴功能主要体现在当剪贴板中有图片数据时（QQ等截屏工具（Ctrl+ALT+A），在网页中右键点击图片点击复制），Ctrl+V可以添加这张图片文件。HTML5&FLASH兼容主流浏览器，接口一致，实现两套运行时支持。用户无需关心内部使用的是哪个内核。同时Flash部分不做任何UI相关的工作，方便不关心flash的用户扩展和定制业务需求。MD5二次传输。当文件较大且数量比较大时，支持上传前文件md5值校验。如果一致，可以直接跳过。.如果服务端和前端统一修改算法，取段md5，可以大大提高验证性能。下载webuploader并解压后，文件目录结构如下：Uploader.swf//样式文件webuploader.css//自定义版webuploader.custom.jswebuploader.custom.min.jswebuploader.fis.js//OnlyFlash版webuploader.flashonly.jswebuploader.flashonly.min.js//仅HTML5版webuploader.html5only.jswebuploader.html5only。min.js//完整版webuploader.jswebuploader.min.js//没有图像处理的版本。webuploader.noimage.jswebuploader.noimage.min.js//没有文件日志功能的版本（默认完整版有日志功能）webuploader.nolog.jswebuploader.nolog.min.js//没有图片处理的版本，包括HTML5和FLASH.webuploader.withoutimage.jswebuploader.withoutimage.min.js注意：这里的css文件很少，只是上传文件按钮的样式，其他样式需要自己写，也可以直接在当前vue组件样式中加入webuploader即可使用WebUploader上传文件，需要引入三种资源：JS、CSS、SWF。方法一：直接导入文件这里我们使用完全压缩版的webuploader.min.js，同时导入Uploader.swf和webuploader.css，这样就可以删除其他版本的文件，只留下这三个文件，并且将解压后的webuploader文件夹直接放在static文件夹下。在index.html中引入webuploader.min.js重启项目后报错，说是缺少jquery，打开源码webuploader.js可以看到webuploader依赖juqery或者Zepto，然后我们引入jquery，我们去jquery官网下载jquery，在index.html中引入，注意，一定要在webuploader.min中.js之前介绍过，这里我下载的是1.12.4版本方法二：模块化介绍下载webuplodernpminstallwebuploader--savedownloadjquerynpminstalljquery@1.12.4引入webuploder和jqueryimport$from'jquery'importWebUploaderfrom'webuploader'写一个DemoHTML部分App.vueJS部分，初始化webuploader实例化webuploader并配置在Vue的挂载循环App.vuemounted:function(){varuploader=WebUploader.create({//swf文件路径swf:'../static/webuploader-0.1.5/Uploader.swf',//文件接收服务器server:'http://webuploader.duapp.com/server/fileupload.php',//选择文件的按钮。可选。//内部是根据当前操作创建的，可能是input元素，也可能是flash。pick:'#picker',//不压缩图片，如果默认是jpeg，上传前先压缩文件再上传！resize:false,//是否开启自动上传auto:false});}文件加入队列前，可以在事件回调函数中过滤文件类型，或者决定是否开启分流上传uploader.on('beforeFileQueued',function(file){console.log('文件加入前队列',文件)});文件加入队列后//当文件加入队列时uploader.on('fileQueued',function(file){console.log('Afterthefileisqueued')var$list=$('#fileList')$list.append(''+''+file.name+''+'等待上传...

'+'

');});点击选择文件按钮后，选择一个文件，会出现一个文件列表，如上图所示。从代码中可以看出，他在选择文件后动态添加了dom，显示了文件名和状态，关于文件的详细信息可以从fileQueued事件的回调函数的参数文件中获取。让我们打印fileext------------------------------filesuffixid------------------------------文件IDlastModifiedDate-----------------文件最后修改时间名称------------------文件名size--------------------------文件大小（这里以字节为单位，1字节=1KB，1M=1024KB，1m=1024*1024字节)source--------------------------包含一些文件信息和方法，比如唯一标识的`ruid`,`uid`,`_hash`文件上传主要是用到webuploader的uploadProgress事件，在文件上传过程中会触发该事件，可以使用该事件创建进度条//在文件上传过程中创建进度条实时显示uploader.on('uploadProgress',function(file,percentage){console.log('文件上传',file,percentage)var$li=$('#'+file.id),$percent=$li.find('.progress.progress-bar');//避免重复创建if(!$percent.length){$percent=$(''+''+'

'+'

').appendTo($li).find('.progress-bar');}$li.find('p.state').text('Uploading');$percent.css('width',percentage*100+'%');//根据上传改变进度条进度宽度});uploadProgress事件回调函数的参数`file是文件的一些信息，percentage是文件上传的进度，1表示上传完成，从上面的代码可以看出，文件开始上传后，会在fileQueued事件中动态创建一个进度条容器，在创建的id=fileList元素中，根据上传进度动态改变进度条的宽度，从而有进度条效果。需要注意的是，上面事件中动态生成的dom元素，比如文件列表、进度条的样式需要自己写。没有webuploader.css。官网没有提醒我这个。第一次用的时候，我也被骗了。如果文件上传成功，可以在事件回调函数中移除进度条，改变进度条的状态等操作上传器.on('uploadSuccess',function(file,response){console.log('文件上传成功',file,response)$('#'+file.id).find('p.state').text('上传');});如果文件上传失败，可以在事件回调函数uploader.on('uploadError',function(file,reason){console.log中更改提示文字、更改进度条样式、删除上传失败的文件等('文件上传失败',file,原因)$('#'+file.id).find('p.state').text('上传错误');});文件上传可以在该事件回调函数中完成，更改提示文字，更改进度条样式等操作uploader.on('uploadComplete',function(file){console.log('文件上传完成')$('#'+file.id).find('.progress').fadeOut();});