JAVA高级面试进阶训练营视频教程

admin

首先说一下vue中使用webuploader该如何引入调用

　　1. 肯定是安装操作， 本人用的是淘宝镜像 cnpm i webuploader -S  如果你没有安装淘宝镜像，则使用 npm i webuploader -S

　　2. 引入操作,在具体的vue组件中引入 ， import Webuploader from 'webuploader', 这时候需要引入你写的css样式来覆盖webuploader的默认css样式。需要单独写一个css文件然后import引入进来，例如：

　　　　　　import Webuploader from 'webuploader'

　　　　　　import ‘@/src/style/webuploader.css’

　　3. webuploader中 option的配置

　　　　　  let option = {

　　　　　　　　auto: false,  // 是否开启自动上传，默认为false，设置为true，选择文件之后，无需操作自动上传

　　　　　　　　swf： ‘./Uploader.swf’, // 指定绝对路径

　　　　　　　　server: '/api/upgrade', // 上传后台服务地址,

　　　　　　　　pick: {

　　　　　　　　　　id: '.webuploader', // 指定容器，id中可以是class ，id ， dom

　　　　　　　　　　label: innerHTML形式，

　　　　　　　　　　multiple: false // 单文件上传 ，设置为true则开启多文件上传。

　　　　　　　　},

　　　　　　　　accept: {

　　　　　　　　　　title: "压缩包"，

　　　　　　　　　　extensions: 'zip, ZIP',

　　　　　　　　　　mimeTypes: 'application/zip'

　　　　　　　　},

　　　　　　　　chunked: true, //开启分片上传

       　　　　　　chunkSize: 10 * 1024 * 1024,  // 分片大小

　　　　　　　　threads: 10, // 线程数

　　　　　　　　methods: 'POST',

　　　　　　　　duplicate: false, // 是否允许上传多个文件

　　　　　　　　fileNumLimit: 1, // 限制文件上传个数

　　　　　　　　fileSingleSizeLimit:  1500 * 1024 * 1024, // 限制单个文件上传的大小

　　　　　　　　formData: {

　　　　　　　　　　guid: webuploader.Base.guid() // 给后端的数据

　　　　　　　　}

　　　　　　}

　　4. 初始化实例, 此处实例化实例写在方法中。

　　　　export default {

　　　　　　data () {

　　　　　　　　return {

　　　　　　　　　　webupload: null

　　　　　　　　}

　　　　　　}

　　　　}

　　　　initData () {

　　　　　　this.webupload = webuploader.create(options) // 实例webuploader

　　　　　　// 接下来就是webuploder的一系列方法

　　　　　　this.webuplode.on('beforeFileQueued', file => {

　　　　　　　　// 文件加入队列之前的一系列操作

　　　　　　})

　　　　　　// fileQueued => 文件加入队列时的操作，

　　　　　　　uploadStart => 开始上传之前的操作

　　　　　　　uploadSuccess => 上传成功的操作

　　　　　　　uploadError => 上传失败的操作

　　　　　　　uploadProgress => 上传时的进度，文件上传过程中创建实时显示的进度条

　　　　　　　uploadComplete => 上传之后的操作，不管成功失败都会执行

　　　　　　　uploadFinished => 所有文件上传结束后的操作

　　　　　　　reset => 重置webuploder实例

　　　　　　　upload => 开始上传 this.webupload.upload()

　　　　}

 　　下篇博客写上代码