上传文件使用的是WebUploader，可 分片、并发、文件体积大时支持MD5秒传
地址：/webuploader/
思路： 初始化上传组件，使用vue-img-cutter的裁剪；在裁剪成功之后；为兼容ie, 将裁剪获得的base64Url格式的图片地址转成bolo文件，追加到上传队列之中；调用上传方法继续进行上传，以确保上传的是裁剪后的图片
使用方法：
第一步：先引用webuploader.js，建议下载下来放在本地直接使用
安装依赖vue-img-cutter并引用
第二步：初始化webUploader
代码如下
<template><div class="logoF1 fl"><div><ImgCutter @cutDown="cutDown" label="上传LOGO":cutWidth="180":cutHeight="40":moveAble="true":sizeChange="false"WatermarkText=""></ImgCutter></div><div class="upload-wrap" v-show="false"><div id="uploader" class="wu-example"><div class="btns"><div id="picker" class="up-btn">上传LOGO</div></div></div></div></div></div></template>import ImgCutter from 'vue-img-cutter'import webuploader from '@/utils/webuploader.js'export default {components: {ImgCutter},data () {return {ruleForm: {logoUrl: '',logoId: ''},uploader: null, // 文件cropperFiles: [], // 裁剪之后的文件}},mounted () {this.init()},methods () {cutDown (res) {this.logoFileName = res.fileName// 裁剪之后base64Url 转成流文件let blob = this.dataURLtoBlob(res.dataURL)this.fileList = res.dataURL// 将流追加进队列this.uploader.addFiles(blob)},init () {// 初始化webuploaderthis.uploader = webuploader.create({// 选择文件的按钮pick: '#picker',// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！compress: false,// 是否开启大文件分片上传，默认为truechunked: true,// 分片上传线程数，默认为3，如果使用断点续传建议线程数改为1threads: 1,// 如果某个分片由于网络问题出错，允许自动重传多少次，默认为2chunkRetry: 2,// 每一片的大小，默认为10MchunkSize: 1024 * 1024 * 10,// 上传超时时间，默认为2分钟timeout: 15 * 60 * 1000,// 是否允许同一个文件重复上传，默认为falseduplicate: true,// 非官方参数，文件大小超过该值则进行分片，默认为10MthresholdSize: 1024 * 1024 * 10,// 非官方参数，是否支持切换至阿里云，有特殊需求的项目可以开通此项，需要进行授权，默认为falseuploadToThirdPartyStorage: false,// 非官方参数，是否开启秒传，默认为true，强烈建议开启。秒传关闭情况，阿里云分片上传默认无MD5checkMd5: true})let _this = this// 上传文件之前this.uploader.on('beforeFileQueued', function (file) {let type = ['bmp', 'gif', 'png', 'jpg', 'jpeg']let size = 10485760_this.file = file// 校验校验类型if (type && type.indexOf(file.ext.toLowerCase()) === -1) {_this.$message.info({message: '文件格式错误，请重新选择上传！',offset: 100})return false}// 检验文件大小if (file.size === 0) {_this.$message.info({message: `不得上传空文件`,offset: 100})return false}if (file.size > size) {_this.$message.info({message: `文件不得大于10M`,offset: 100})return false}_this.fileName = file.namereturn true})// 当上传的文件加入队列以后触发this.uploader.onFileQueued = function (file) {_this.cropperFiles = []file.name = _this.logoFileName// upload()开始上传。此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程_this.uploader.upload()}// 上传成功this.uploader.on('uploadSuccess', function (file) {// 将上传的文件放在裁剪文件列表中_this.cropperFiles = [{fileId: file.id,fileType: file.ext,fileSize: file.size,fileName: _this.logoFileName,percentage: 100, // 进度完成fileUrl: file.url,id: file.contextId}]_this.filesLogo = _this.cropperFiles_this.ruleForm.logoUrl = _this.filesLogo[0].fileUrl_this.ruleForm.logoId = _this.filesLogo[0].id_this.showCropee = false})// 上传过程中进度显示this.uploader.on('uploadProgress', function (file, percentage) {_this.cropperFiles = [{percentage: percentage}]})},}}
如有其他文件裁剪并上传的方法，希望大家告知，以供学习；先说谢谢了
