Vue项目中遇到了大文件分片上传的问题

Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽。

上传就上传吧,为什么搞得那么麻烦,用分片上传?

分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。
当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。

实现后的界面:

Vue项目中遇到了大文件分片上传的问题_第1张图片

主要是两个文件,封装的上传组件和具体的ui页面,上传组件代码下面有列出来。这两个页面的代码放到github上了:https://github.com/shady-xia/Blog/tree/master/vue-webuploader。

在项目中引入webuploader

  1. 先在系统中引入jquery(插件基于jq,坑爹啊!),如果你不知道放哪,那就放到index.html中。
  2. 在官网上下载Uploader.swfwebuploader.min.js,可以放到项目静态目录static下面;在index.html中引入webuploader.min.js。
    (无需单独再引入webuploader.css,因为没有几行css,我们可以复制到vue组件中。)
<script src="/static/lib/jquery-2.2.3.min.js">script>
<script src="/static/lib/webuploader/webuploader.min.js">script>

需要注意的点:

  1. 在vue组件中,通过import './webuploader';的方式引入webuploader,会报''caller', 'callee', and 'arguments' properties may not be accessed on strict mode ...'的错, 这是因为你的babel使用了严格模式,而caller这些在严格模式下禁止使用。所以可以直接在index.html中引入webuploader.js,或者手动去解决babel中'use strict'的问题。

基于webuploader封装Vue组件

封装好的组件upload.vue如下,接口可以根据具体的业务进行扩展。

注意:功能和ui分离,此组建封装好了基本的功能,没有提供ui,ui在具体的页面上去实现。

<template>
    <div class="upload">
    div>
template>

                    
                    

你可能感兴趣的:(Vue项目中遇到了大文件分片上传的问题)