vue结合WebUploader插件实现大文件分片上传

最新推荐文章于 2025-04-10 16:20:33 发布

小不着调°

最新推荐文章于 2025-04-10 16:20:33 发布

阅读量2.3k

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_33414883/article/details/104550359

版权

本文介绍了如何在Vue项目中结合WebUploader插件实现大文件的分片上传。首先，从官方地址下载WebUploader并引入所需的JS、CSS和SWF文件。接着，解决因依赖jQuery而产生的报错问题，确保在引入WebUploader前引入jQuery。然后，通过实例展示upload.vue组件的使用，并分享了在实际操作中遇到的两个问题：上传按钮点击无效和样式修改。对于按钮无效问题，提供了解决方案，包括调整元素类型和添加特定样式。最后，提供了参考链接以帮助修改上传按钮的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.下载webuploader

下载地址：官网http://fex.baidu.com/webuploader/
在这里插入图片描述

2.引入webuploader

使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。
方法1.直接引入文件
这里我们使用完全压缩版的webuploader.min.js,同时还要引入Uploader.swf 、 webuploader.css，所以可以删除其他版本的文件，只留这三个文件，将解压的webuploader文件夹直接放在static文件夹下.

在index.html中引入webuploader.min.js

<script src="./static/webuploader-0.1.5/webuploader.min.js"></script>

在这里插入图片描述
重启项目后报错了，说缺少依赖jquery,打开源码webuploader.js看一下

原来webuploader是依赖于juqery或者Zepto的，那我们引入jquery,我们去jquery官网下载jquery,并在index.html中引入，注意，一定要在webuploader.min.js之前引入，在这里我下载的是1.12.4版本

<script src="./static/webuploader-0.1.5/jQuery1.12.4.js"></script>

方法2：模块化引入
下载webuploder

npm install webuploader --save

下载jquery

npm install jquery@1.12.4

在App.vue中引入webuploder和jquery

import $ from 'jquery'
import WebUploader from 'webuploader'

3.实例

upload.vue

<template>
    <div id="uploader" class="wu-example">
      <!--用来存放文件信息-->
      <div id="fileLilst" class="uploader-list"></div>
          <div class="btns">
            <!-- 选择文件的按钮 -->
              <div id="picker">选择文件</div>
            <!-- 开始上传按钮 -->
              <button id="uploadBtn" class="btn btn-default">开始上传</button>
      </div>
    </div>
</template>
<script>
import $ from 'jquery'
import WebUploader from 'webuploader'
var fileMd5;
//自定义参数 文件名
var fileName, uploader;
export default {
   
    name: 'upload',
	mounted() {
   
		this.getAllFileList()
      this.uploadPlan = `上传完成（${
    this.fileNum} / ${
    this.completeNum}）`

      //监听分块上传过程中的三个时间点  
      WebUploader.Uploader.register({
   
        "before-send-file": "beforeSendFile",  //整个文件上传前调用
        "before-send": "beforeSend",  //每个分片上传前
        "after-send-file": "afterSendFile",  //分片上传完毕
      }, {
   
        //时间点1：所有

最低0.47元/天解锁文章