首先说一下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()
}
下篇博客写上代码