在Vue项目中使用网络上传器上传文件的方法

导言：

WebUploader是百度WebFE(FEX)团队开发的一款简单的现代文件上传组件，主要基于HTML5，辅以FLASH。HTML5的优势在现代浏览器中可以得到充分发挥，而主流IE浏览器并没有被抛弃，使用了原有的FLASH运行时，兼容IE6、IOS6和安卓4。两套运行时，同样的调用模式，用户可以随意使用。大文件碎片用于并发上传，大大提高了文件上传的效率。

碎片化和并发性

分片与并发相结合，将一个大文件分成多个块并发上传，大大提高了大文件的上传速度。

当网络问题导致传输错误时，只需要重新传输错误的片段，而不是整个文件。此外，碎片传输可以实时跟踪上传进度。

预览，压缩

支持常见图片格式JPG、JPEG、GIF、BMP和PNG的预览和压缩，节省网络数据传输。

解析jpeg中的元信息，正确处理各种方向，压缩后上传保留图片的所有原始元数据。

以多种方式添加文件

支持多个文件、类型过滤、拖放(文件夹)和图像粘贴。

粘贴功能主要体现在当剪贴板中有图片数据时(QQ(Ctrl ALT A)等截屏工具，在网页上右键点击图片，点击复制)，Ctrl V就可以添加这个图片文件。

HTML5闪存

兼容主流浏览器，界面一致，实现了两套运行时支持，用户无需在意里面用的是什么内核。

同时flash部分不做任何UI相关的工作，方便不关心Flash的用户扩展定制业务需求

MD5第二次传输

当文件大且量大时，可以在上传前验证文件的md5值，如果一致可以跳过。

如果服务器和前端统一修改算法，取md5，可以大大提高验证性能，大约需要20 ms。

下载网络上传程序

下载解压后，文件目录结构如下

Uploader.swf

//样式文件webuploader.css//定制版webuploader . custom . js webuploader.custom.min.jswebuploader.fis.js//只有Flash实现版webuploader.flashonly.jswebuploader.flashonly.min.js//只有HTML5实现版webuploader . html 5 Only . js webuploader.html5only.min.js//full版webuploader . js webuploader.min.js//no图像处理版。Webuploader.noimage.jswebuploader.noimage.min.js//版没有文件日志功能(默认完整版有日志功能)webuploader.nolog.jswebuploader.nolog.min.js//版没有图像处理，包括HTML5和flash。webuploader . withdimage . jswebuploader . withdimage . min . js注意：这里的css文件很少，只有上传文件按钮的样式，其他样式需要自己编写，也可以直接追加到当前vue组件的样式中。

介绍网络上传器

使用Web Uploader上传文件需要引入三种资源：JS、CSS、SWF。

方法1:直接导入文件

在这种情况下，我们使用的是完全压缩版本的webuploader.min.js，还引入了Uploader.swf和webuploader.css，因此可以删除其他版本的文件，只留下这三个文件，将解压后的webuploader文件夹直接放在静态文件夹下。

将webuploader.min.js引入index.html

脚本src='http:/static/web uploader-0 . 1 . 5/web uploader . min . js '/脚本

重新启动项目后，我报告了一个错误，说我缺乏对jquery的依赖。打开源代码webuploader.js看看

最初，webuploader依赖于juqery或Zepto，所以让我们介绍jquery。我们去jquery官网下载jquery，在index.html介绍一下。注意，必须在webuploader.min.js之前引入这里我下载的是1.12.4版本。

脚本src=' http :/static/web uploader-0 . 1 . 5/jquery 1 . 12 . 4 . js '/编写Demo的脚本

HTML部分

App.vue

模板div id=' app ' div id=' uploader ' class=' Wu-example '！-用于存储文件信息-div id=' file lilst ' class=' uploader-list '/div div class=' btns '！-选择文件按钮- div id='picker '选择文件/div！-开始上传按钮-按钮id=' upload BTN ' class=' btnbtn-default '开始上传//按钮/div /div/templateJS js，并初始化webuploader

在Vue的挂载周期中实例化和配置网络上传器

App.vue

mount ed : FuncTion(){ varuploader=webuploader . create({//swf文件路径swf : './static/web uploader-0 . 1 . 5/uploader . swf '，//文件接收服务器。服务器： ' http://webuploader.duapp.com/server/fileupload.php',//select文件的按钮。可选。//内部根据当前操作创建，可以是输入元素，也可以是flash.pick:' # picker '。//图片不压缩，但如果默认为jpeg，上传前会先压缩文件！resize : false })；}在文件加入队列之前，

您可以在这个事件回调函数中过滤文件类型，或者根据文件大小决定是否启用片段上传。

Uploader.on ('beforefilequeued '，函数(文件){console.log('加入队列前的文件'，文件)})；文件加入队列后，

//当文件被添加到队列中时，uploader.on('fileQueued '，Function(file) {console.log('在文件加入队列后')var $ list=$(' # file list ')$ list . append(' div id=' ' file . id ' ' class=' item ' ' ' H4类=' info ' ' file . name '/H4 ' ' p class=' state ')等待上载./p ' '/div ')；});

点击选择文件按钮，选择一个文件，如上图所示，会出现文件列表。从代码中可以看出，dom是在选择文件后动态添加的，显示文件名和状态。关于文件的详细信息可以从fileQueued事件的回调函数的参数文件中获得。让我们打印文件。

外部文件后缀id。Ruid大小-文件大小(这里以字节为单位，1字节=1KB，1M=1024KB，1m=1024*1024字节)来源

文件正在上传

主要使用webuploader的uploadProgress事件，在文件上传过程中触发，可以用来创建进度条

//创建进度条，在文件上传时实时显示。Uploader.on('上传进度'，函数(文件，百分比){console.log('文件正在上传'，文件，百分比)var $ Li=$ ('#' file.id)，$ percent=$ Li . find(' . progress . progress-bar//避免重复创建if(！$ percent . length){ $ percent=$(' div class=' progress progress-striped active ' ' ' div class=' progress-bar ' role=' progress bar ' style=' width : 0% ' ' '/div ' '/div ')。appendo($ Li)。查找('。进度条')；} $li.find('p.state ')。文本(“正在上传”)；$percent.css('width '，percent * 100 ' % ')；//根据上传进度改变进度条的宽度})；

uploadProgress事件回调函数的参数文件是文件的一些信息，百分比是文件上传进度，1是上传完成。从上面的代码可以看出，在文件上传后，将在fileQueued事件中动态创建的id=fileList元素中动态创建一个进度条容器。并根据上传进度动态改变进度条的宽度，使其具有进度条的效果。需要注意的是，上述事件中动态生成的dom元素，比如文件列表、进度条的样式，都需要我们自己写，这在webuploader.css官网中是没有的，没有提醒我这一点。第一次用的时候也被坑了。

文件上传成功、失败并完成处理

文件上传成功

您可以在此事件回调函数中移除进度条并更改进度条的状态

Uploader.on('上传成功'，函数(文件，响应){console.log('文件上传成功'，文件，响应)$ ('#' file.id)。查找(' p.state ')。文本('上传')；});文件上传失败

您可以更改提示文本，更改进度条的样式，并删除在此事件回调函数中上传失败的文件

Uploader.on ('uploaderror '，函数(文件，原因){console.log('文件上传失败'，文件，原因)$ ('#' file.id)。查找(' p.state ')。文本(“上传错误”)；});文件上传完成

您可以在此事件回调函数中更改提示文本和进度条的样式

Uploader.on ('uploadcomplete '，function(file){ console . log(' file upload complete ')$(' # ' file . id)。查找('。进步”)。fade out()；});摘要

以上就是边肖介绍的Vue项目中使用WebUploader上传文件的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！

版权声明：在Vue项目中使用网络上传器上传文件的方法是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益，请联系本站底部QQ或者邮箱删除。