vue-simple-uploader在VUE3中分片上传大文件网站首页 技术教程

vue-simple-uploader在VUE3中分片上传大文件

Tronyel 2023-06-03 16:00:03

简介vue-simple-uploader在VUE3中分片上传大文件

vue-simple-uploader是一个优秀的大文件分片上传组件，在vue2里面工作一切正常，但是在vue3里面却发现了一些问题：

（1）在element-plus的el-dialog里面渲染失败；

（2）上传进度条不能正常工作，重传、删除、开始、暂停等按钮不能正常工作；

vue-simple-uploader的作者做了vue3的适配方案，但是直接使用这个方案还是有一些问题，比如没有删除按钮。

附：vue-simple-uploader的vue3适配方式

https://github.com/simple-uploader/vue-uploader/tree/vue3

我采用的解决办法是，直接拉了源码，然后手动修改。

（1）github上拉取vue-simple-uploader的源码（附件中给出）；

（2）package.json里面的依赖包还是安装旧版本的

"vue-simple-uploader": "^0.7.6"

（3）在模块中引用并使用

import uploader from "@/components/ChunkUpload/uploader.vue";

内嵌到一个form中

        <el-form-item label-width="0px" v-if="open">
          <uploader :options="options" :file-status-text="statusText" class="upload-tiff" ref="tiffUploader"
            @file-complete="fileComplete" @file-added="fileAdded" @complete="complete" v-on:file-removed="fileRemoved">
          </uploader>
          <div class="file-upload-tip">* ZIP内每个文件以日期命名，如20230508.tiff</div>
        </el-form-item>

（4）效果