WebUploader嵌入Vue开发

529 阅读2分钟

公司的一个项目,由于最近客户要上传大文件遇到了选择文件上传不报错页面没任何反应的问题,由于开发时就是用的webUploader,就找官方文档看了看,官方只提供了文件的引入方式,查了一些资料发现大家也都是用的文件引入的方式,同事的操作也都是按官方文档来进行的开发,但是觉得对于一个工程化的项目来说,总觉得不太好,所以就着手尝试了一下,更改为依赖包引入

webuploader用vue的引入方法和注意事项:

npm install webuploader --save

npm install jquery@2 --save

需要特别说明一下,jQuery尽量用2的版本,不然有些问题,比如:

 uploader.md5File( file )
        // 及时显示进度
        .progress(function(percentage) {
            console.log('Percentage:', percentage);
            //用jQuery3的版本,在此怎么都监听不到分片的状态
        })

由于用户需要上传高达12G的数据,所以在进行分片的时候会需要等待处理一段时间,但是如果不用此状态去监听,我的页面就无任何状态了,设计之初并没有考虑到客户会有这么大数据量的需求,所以在这儿就加了个状态来显示当前哪个文件正在解析,后又用uploadStart来把状态及时清理;

在vue中的引入方式:

import $ from "jquery";
import WebUploader from "webuploader";

export default {
   mounted() {
   this.uploader = WebUploader.create({
       //add your webuploader options
      });
    }
}

由于webuploader依赖于jQuery,调试过程中发现引入的jQuery3版本会引发一些不确定的问题,尽量引入2.x的版本来使用,避免出现一些奇怪的问题。如果你不需要使用jQuery的选择器或者API,可以在组件页面不用引入