WebUploader之前端大文件分片上传

最新推荐文章于 2024-07-04 16:06:29 发布

wealth_nana

最新推荐文章于 2024-07-04 16:06:29 发布

阅读量2.5k

点赞数 6

本文链接：https://blog.csdn.net/wealth_nana/article/details/105051649

版权

本文介绍了WebUploader这一HTML5为主的文件上传组件，详细阐述了如何实现前端大文件的分片上传，包括组件简介、前端代码实现、注意事项、传参情况以及解决点击按钮无法弹出文件选择框的问题。重点强调了在文件被添加进队列时进行分片上传判断的重要性以及在`uploadBeforeSend`中设置上传参数的方法。

摘要由CSDN通过智能技术生成

WebUploader之单个大文件分片上传（前端实现）

1、组件简介

webuploader（官方定义）：是一个以 HTML5 为主， Flash为辅的文件上传组件，采用大文件分片/并发上传的方式，极大地提高了文件上传的效率，同时兼容多种浏览器版本；

链接： WebUploader官网.

2、前端代码实现

首先，下载组件，并引入到项目文件；

import WebUploader from "webuploader";

WebUploader组件包

本例子模拟后台所需参数：

参数	说明
guid	文件分片GUID
md5Value	文件的 MD5值
chunk	当前所传文件的当前分片数
chunks	当前所传文件的分片总数
id	文件ID
fileName	文件名称
file	文件内容

话不多说，直接上代码。

//引入组件
import WebUploader from "webuploader";
let uploader = null,GUID = null;

onReady(){
   		
		GUID = WebUploader.Base.guid();//每个文件有自己唯一的guid
        uploader = WebUploader.create({
   
           //设置选完文件后是否自动上传
           auto: false,
           //swf文件路径
           // swf: 'vendor/webUpload/Uploader.swf',
           // 文件接收服务端。
           server: "http：//www.baidu.com/BigFileUpload", //服务器端的上传页面地址
           // 选择文件的按钮。可选。
           // 内部根据当前运行是创建，可能是input元素，也可能是flash.
           pick: "#fileupload",//点击选择文件的按钮id
           chunked: true, //开启分块上传
           chunkSize: 10 * 1024 * 1024,//10M 一个分片
           chunkRetry: 3, //网络问题上传失败后重试次数
           threads: 1, //上传并发数
           //fileNumLimit :1,
           fileSizeLimit: 1000 * 1024 * 1024, //最大1GB
           fileSingleSizeLimit: 1000 * 1024 * 1024,
           resize: false,//不压缩
           formData: {
   },
           //选择文件类型
           acce