vue上传文件夹+上传文件vue-simple-uploader

vue上传文件夹+上传文件vue-simple-uploader

使用插件

在main.js引入

复制代码
import uploader from 'vue-simple-uploader'

Vue.use(uploader);

 <el-dialog title="上传文件" :visible.sync="dialogFileVisible" width="50%" :before-close="handleFileClose"
      :close-on-click-modal="false" class="myfiletoUploadcs">
      <div style="width:100%; display:flex; justify-content:center;">
        <uploader :key="uploader_key" :options="options" class="uploader-example" @file-success="onFileSuccess"
          ref="uploader" @file-complete="isComplete">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <uploader-btn :directory="true" :single="true">上传文件夹</uploader-btn>
            <uploader-btn>上传文件</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </div>
    </el-dialog>

  uploader_key: new Date().getTime(), //这个用来刷新组件--解决不刷新页面连续上传的缓存上传数据(注:每次上传时,强制这个值进行更改---根据自己的实际情况重新赋值)
        options: {
          target: this.baseurl +
            "/common/uploadFolder", ///antiqueRecord/upload_folder1针对只有一层文件夹 //SpringBoot后台接收文件夹数据的接口
          testChunks: false, //是否分片-不分片
          chunkSize: 1024 * 1024 * 90, //每块大小
          // simultaneousUploads: 5, //并发上传块数

          headers: {
            Authorization: "Bearer " + getToken()
          },
          query: {
            cover: true,
            folderPath: ''
          },
        },

  onFileSuccess: function (rootFile, file, response, chunk) {
        var msg = JSON.parse(response);
      },
      isComplete(suc) {
        console.log(22, suc);
        if (suc.completed) {
          this.daoru = true;
        }
      },
相关推荐
像是套了虚弱散2 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan2 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15883 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追4 小时前
Vue组件化开发
前端·html
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长4 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH4 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴4 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30735 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构