如果你不是被迫使用WebUploader的，可以离开这篇文章去找其他适合vue3的文件上传框架了，如果你已经进了这个坑，下面的介绍希望能让你少踩点坑。
1. 安装
安装webuploader ：npm install webuploader --save
webuploader依赖jq，安装jquery（我这里指定了jq的版本，没什么特别的原因...）：npm install jquery@3.5.1
2. vite构建的项目注意
vite构建的项目不支持非严格模式，需要修改node_modules\webuploader\dist\webuploader.js和webuploader.fis.js 文件（改完需要删掉node_modules里面的.vite,然后重新运行）：
原来： // input.on( 'change', function( e ) { // var fn = arguments.callee, // clone; // me.files = e.target.files; // // reset input // clone = this.cloneNode( true ); // clone.value = null; // this.parentNode.replaceChild( clone, this ); // input.off(); // input = $( clone ).on( 'change', fn ) // .on( 'mouseenter mouseleave', mouseHandler ); // owner.trigger('change'); // }); 改为: var changeFn = (function even(that, e){ var clone; me.files = e.target.files; // reset input clone = that.cloneNode( true ); clone.value = null; that.parentNode.replaceChild( clone, that ); input.off(); input = $(clone).on('change', function(e){ even(this, e); }).on('mouseenter mouseleave', mouseHandler); owner.trigger('change'); }); input.on('change', function(e){ changeFn(this, e); });
3. 创建WebUploader.vue组件
注意下面的message.xx是已经被二次封装的Elmessage消息提示
<template> <div class="WebUploader"> <!-- 选择文件按钮 --> <div class="UploadFile__chooseFile">{{butTextC}}</div> </div></template><script setup>import { ref, onMounted, nextTick} from 'vue'import { message } from '@/assets/util.js'import { getVerify } from '@/service/api'// 导入webuploaderimport webUploader from 'webuploader'const props = defineProps({ butTextC: { type: String, default: '选择文件' }})const emit = defineEmits([ 'butClickC' // 用于告诉父组件点击了按钮])// 避免webUploader.Uploader.register重复注册webUploader.Uploader.unRegister('UploadFileRegister')register()//监听分块上传过程中的三个时间点（开启分片上传时有效，我只用到了beforeSendFile，所以没有后面两块的代码）, 需要在webUploader.create之前调用function register() { webUploader.Uploader.register( { 'name': 'UploadFileRegister', 'before-send-file': 'beforeSendFile', 'before-send': 'beforeSend', 'after-send-file': 'afterSendFile' }, { // 时间点1：:所有分块进行上传之前调用此函数 beforeSendFile: function (file) { // 利用md5File（）方法计算文件的唯一标记符 // 创建一个deffered let deferred = webUploader.Deferred() // 1.md5File：计算文件的唯一标记，把文件名文件大小和md5拼接作为文件唯一标识，避免重复上传 new webUploader.Uploader() .md5File(file, 0, 10 * 1024 * 1024) .progress(function (percentage) {}) .then(function (val) { file.fileMd5 = val // 允许自定义file.xx插入文件的对象里，可以在下文的fileQueued等阶段的file中取到 // file.test = xx // 如果文件后缀是禁止上传的后缀，跳过上传 // 这是由于我没有找到webUploader过滤上传后缀的属性，所以在这里处理，excludeFile内容为[doc,docx]这种 let flagForbid = 1 store.excludeFile.forEach(item => { if(item === file.ext) { flagForbid = 2 deferred.reject() message.warning(`不允许上传.${file.ext}后缀的文件！`) } }) if(flagForbid === 2) return // 2.请求后台是否保存过该文件，如果存在，则跳过该文件，实现秒传功能，resolve:继续上传；reject：跳过文件，这里getVerify是本项目校验文件的一个接口，如果你们不需要校验文件是否后台有重复，可以不用这块 getVerify(data) .then((res) => { if (res.success) { deferred.resolve() } else { message.error(data.name + res.message) // 文件校验失败 deferred.reject() } }) .catch(() => { message.error('文件校验失败') // 验证接口报错，跳过该文件 deferred.reject() }) }) //返回deffered return deferred.promise() } } )}// 将fileType处理成.doc,.docx,(给前面多加一个.)function buildFileType(fileType) { let ts = fileType let ty = '' for (let i = 0; i < ts.length; i++) { ty = ty + '.' + ts[i] + ',' } return ty.substring(0, ty.length - 1)}onMounted(() => { // webUploader.create要在页面渲染完成后进行，不然会找不到.UploadFile__chooseFile，创建不了按钮 nextTick(() => { uploader = webUploader.create({ auto: false, resize: false, // 不压缩image duplicate: true, // 文件去重，默认开启，不允许用户选择同一个文件 server: apiUrl + 'xx/xx', // 默认文件接收服务端地址 pick: { id: '.UploadFile__chooseFile', // 指定选择文件的按钮容器，不指定则不创建按钮。它不仅支持id, 也支持class、dom节点（这个没有试过）。 multiple: true // 开启文件多选 }, accept: [ { title: 'file', extensions: store.includeFile[0] ? store.includeFile : '*', // 上传接受的文件类型，'*'表示所有都接受，extensions接受的参数为：[doc,docx,pdf,xls]这种形式 mimeTypes: store.includeFile[0] ? buildFileType(store.includeFile) : '*', // 指上传窗口默认展示的匹配文件后缀的文件（就是弹出的上传窗口，它可能存在很多类型的文件，如果你只写了.doc，那么此时只会显示.doc的文件，其他过滤掉不显示）：参数为'.doc,.docx,.pdf,.xls'这种形式 } ], fileNumLimit: 10, // 验证文件总数量, 超出则不允许加入队列,默认值：undefined,如果不配置，则不限制数量 fileSizeLimit: 100 * 1024 * 1024 * 1024, // 1kb=1024*1024,验证文件总大小是否超出限制, 超出则不允许加入队列 fileSingleSizeLimit: 100 * 1024 * 1024 * 1024, // 验证单个文件大小是否超出限制, 超出则不允许加入队列。 chunked: true, // 是否开启分片上传 chunkSize: 100 * 1024 * 1024 * 1024, // 如果要分片，每一片的文件大小，分片需要后端配合，我的项目没有，但是我又需要beforeSendFile阶段，所有我开启了分片上传，然后给每个分片为接受的文件的最大值，它就不会被真的分片了 prepareNextFile: false // 在上传当前文件时，准备好下一个文件,设置成false，不然开启文件多选浏览器会卡死 }) // 文件加入队列后 uploader.on('fileQueued', function (file) { // 文件上传 uploader.upload() // 文件加入队列告诉父组件关闭弹窗 emit('butClickC', 1) // 这个属性可以移除当前的文件上传，你可以自行判断什么情况下移除,注意文件加入队列是一个一个加入的，即每加入一个都有自己的uploader.on('fileQueued')方法，当前的fileQueued只能处理当前文件 // uploader.removeFile(file, true) }) // 上传之前 uploader.on('uploadBeforeSend', function (block, data, headers) { // 注意，加入队列的文件（fileQueued）不一定都被上传了（可以在beforeSendFile时间点跳过），但uploadBeforeSend阶段的都是允许上传的文件 // 允许自定义block.file.xx插入文件的对象里，可以在下文的后续阶段的file中取到 // beforeSendFile时间点定义的file.test = xx，在这里可以用block.file.test取到 // block.file.testA = 'xx' }) // 文件上传中 uploader.on('uploadProgress', function (file, percentage) { // 可以根据此时的percentage显示进度条 }) // 文件上传成功 uploader.on('uploadSuccess', function (file, response) { message.success(file.name + '文件上传成功') }) // 文件上传失败 uploader.on('uploadError', function (file, reason) { message.warning(file.name + '文件上传失败') }) // 文件上传错误 uploader.on('error', function (handler) { if (handler == 'F_EXCEED_SIZE') { message.warning('文件上传过大！') } else if (handler == 'Q_EXCEED_SIZE_LIMIT') { message.warning('文件大小超过限制！') } else if (handler == 'Q_TYPE_DENIED') { message.warning('不允许上传此类文件！') } }) // 所有文件上传完成，无论成功或者失败 uploader.on('uploadFinished',function(){ }); })})</script><style lang="scss">// webuploader 初始化样式，注意不能写在scope里面.webuploader-container { position: relative;}.webuploader-element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px);}.webuploader-pick { // margin-left: 0.12rem; // position: relative; display: block; cursor: pointer; background: var(--el-color-primary); // padding: 0.06rem 0.15rem; color: #fff; text-align: center; border-radius: 0.04rem; overflow: hidden; width: 1rem; height: 0.31rem; line-height: 0.31rem; border: none;}.webuploader-pick-hover { background: var(--el-color-primary-light-3);}.webuploader-pick-disable { opacity: 0.6; pointer-events: none;}</style>
4. 使用WebUploader.vue组件
<template> <div class="UploadFile__wrap"> <el-dialog :model-value="isVisibleC" :show-close="false" @close="close" title="上传文件" > <template #footer> <div class="dialog-footer"> <el-button class="dialog-footer-cancel" @click="cancel">取消</el-button> <CpnWebUploader @butClickC='butClickC' :butTextC='选择上传的文件'></CpnWebUploader> </div> </template> </el-dialog> </div></template><script setup>import CpnWebUploader from '@/components/common/WebUploader.vue';// 子组件发射的@butClickC事件这里处理function butClickC() {}</script>