|
vue配合webuploader分片上传
啥也不说，献上代码
封装upload.vue:
<template>
<div class="upload"></div>
</template>
<script>
import WebUploader from ".././../../../static/js/webuploader.min";
import { httpUrl } from "../../../api/http_url";
import { v4 as uuidv4 } from "uuid";
import md5 from "js-md5";
export default {
name: "vue-upload",
props: {
accept: {
type: Object,
default: null
},
// 上传地址
url: {
type: String,
default: httpUrl.fenP
},
// 上传最大数量 默认为100
fileNumLimit: {
type: Number,
default:1000000
},
// 大小限制 默认2M
fileSingleSizeLimit: {
type: Number,
default: 5 * 1024 * 1024
},
// 上传时传给后端的参数，一般为token，key等
formData: {
type: Object,
default: {
// md5:this.uploader.md5File( files )
md5: null
}
},
// 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议
// keyGenerator: {
// type: Function,
// default(file) {
// const currentTime = new Date().getTime();
// const md5 = md5(file.name)
// return md5;
// }
// },
multiple: {
type: Boolean,
default: true
},
// 上传按钮ID
uploadButton: {
type: String,
default: httpUrl.fenP
},
},
data() {
return {
uploader: null,
md5: null,
imgAideo:[]
};
},
mounted() {
this.initWebUpload();
},
methods: {
initWebUpload() {
// var md5 = uuidv4();
// this.formData.md5 = md5;
// sessionStorage.setItem("md5", md5);
const _this = this
this.uploader = WebUploader.create({
auto: true, // 选完文件后，是否自动上传
swf: "/static/lib/webuploader/Uploader.swf", // swf文件路径
server: this.url, // 文件接收服务端
pick: {
id: this.uploadButton, // 选择文件的按钮
multiple: this.multiple, // 是否多文件上传 默认false
label: ""
},
accept: this.getAccept(this.accept), // 允许选择文件格式。
threads:1,
fileNumLimit: this.fileNumLimit, // 限制上传个数
//fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
formData: this.formData, // 上传所需参数
chunked: true, //分片上传
chunkSize: this.fileSingleSizeLimit, //分片大小
resize : false,
duplicate: true // 重复上传
});
// 当有文件被添加进队列的时候，添加到页面预览
this.uploader.on("fileQueued", file => {
this.$emit("fileChange", file);
});
this.uploader.on("uploadStart", file => {
// 在这里可以准备好formData的数据
this.uploader.options.formData.md5 = md5(file.name);
});
// 文件上传过程中创建进度条实时显示。
this.uploader.on("uploadProgress", (file, percentage) => {
this.$emit("progress", file, percentage);
});
this.uploader.on("uploadSuccess", (file, response) => {
this.$emit("success", file, response);
});
this.uploader.on("uploadError", (file, reason) => {
console.error(reason);
this.$emit("uploadError", file, reason);
});
this.uploader.on("error", type => {
let errorMessage = "";
if (type === "F_EXCEED_SIZE") {
this.$message.error(
`文件大小不能超过${this.fileSingleSizeLimit / (1024 * 1000)}M`
);
} else if (type === "Q_EXCEED_NUM_LIMIT") {
this.$message.error("文件上传已达到最大上限数");
} else {
this.$message.error(`上传出错！请检查后重新上传！错误代码${type}`);
}
console.error(errorMessage);
this.$emit("error", errorMessage);
});
this.uploader.on("uploadComplete", (file, response) => {
this.$emit("finshed", file);
});
},
upload(file) {
this.uploader.upload(file);
},
stop(file) {
this.uploader.stop(file);
},
cancelFile(file) {
this.uploader.cancelFile(file);
},
removeFile(file, bool) {
this.uploader.removeFile(file, bool);
},
getAccept(accept) {
switch (accept) {
case "video":
return {
title: "Videos",
exteensions: "mp4,mp3,avi",
mimeTypes: ".mp4,.mp3,.avi"
};
break;
case "image":
return {
title: "Images",
exteensions: "gif,jpg,jpeg,bmp,png,webp,jfif",
mimeTypes: ".gif,.jpg,.jpeg,.bmp,.png,.webp,.jfif"
};
break;
default:
return accept;
}
}
}
};
</script>
<style scoped>
</style>
父组件：
import vueUpload from “./upload”;//组件
import WebUploader from “…/…/…/…/static/js/webuploader.min”;
mounted() {
setTimeout(() => {
document.getElementsByClassName(
“webuploader-element-invisible”
)[0].style.display = “none”;
}, 10);
},
computed: {
uploader() {
return this.$refs.uploader;
}
},
components: {
vueUpload,
uploader() {
return this.$refs.uploader;
}
},
//调取方法
fileChange(file) {
this.fileList.push(file);
},
onProgress(file, percent) {
if (this.imgs.length > 8) {
this.loading = false;
} else {
this.loading = true;
}
},
onSuccess(file, response) {
this.getImg(file);
},
getImg(file) {
if (this.imgs.length > 8) {
this.$message.error("最多可上传9张");
this.loading = false;
} else {
var qs = require("qs");
var a = md5(file.name);
this.$axios
.post(
httpUrl.merge,
qs.stringify({
md5: a,
fileName: a + "." + file.ext
})
)
.then(res => {
this.loading = false;
if (res.data.code == 1) {
this.$message.success("上传成功");
this.imgs.push({
img: res.data.data,
id: file
});
} else {
this.loading = false;
this.$message.error(res.data.msg_cn);
}
});
}
},
fileSize(size) {
return WebUploader.Base.formatSize(size);
},
fileCategory(ext) {
let type = "";
const typeMap = {
image: ["gif", "jpg", "jpeg", "png", "bmp", "webp", "jfif"],
video: ["mp4", "mp3", "avi"],
text: []
};
Object.keys(typeMap).forEach(_type => {
const extensions = typeMap[_type];
if (extensions.indexOf(ext) > -1) {
type = _type;
}
});
return type;
},
官方文档：http://fex.baidu.com/webuploader/document.html
里面都有方法介绍哦，代码中httpUrl.fenp是后台分片接口哦，httpUrl.merge是后台合并上传哦
不详细，仅供参考，生活不易，小杨叹气！
|