Vue使用vue-simple-uploader上传文件夹

素颜马尾好姑娘i 2022-01-15 19:15 1714阅读 0赞

# Vue使用vue-simple-uploader上传文件夹 #

### 先睹为快 ###

*  1 点击上传“上传文件夹”按钮
 *  ![20190613152215427.jpg][]
    
     
 *  2 选择文件夹
 *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA_size_16_color_FFFFFF_t_70][]
 *  3 确定上传
 *  ![2019061315225859.jpg][]
    
     
 *  4 上传进度
 *  ![20190613152311379.jpg][]

### 引入控件 ###

*  install

npm install vue-simple-uploader --save

*  main.js配置

import uploader from 'vue-simple-uploader'
    Vue.use(uploader)

### vue部分 ###

*  页面

<div>
        <uploader :key="uploader_key" :options="options" class="uploader-example"
                  @file-success="onFileSuccess">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <uploader-btn :directory="true" :single="true">选择文件夹</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </div>

*  数据

data() {
      return {
        uploader_key: new Date().getTime(),//这个用来刷新组件--解决不刷新页面连续上传的缓存上传数据（注：每次上传时，强制这个值进行更改---根据自己的实际情况重新赋值）
        options: {
          target: '/uploadCategory',//SpringBoot后台接收文件夹数据的接口
          testChunks: false//是否分片-不分片
        },
      };
    },

*  方法

onFileSuccess: function (rootFile, file, response, chunk) {
            //这里可以根据response（接口）返回的数据处理自己的实际问题（如：从response拿到后台返回的想要的数据进行组装并显示）
            //注，这里从文件夹每上传成功一个文件会调用一次这个方法
      }

*  样式

### SpringBoot部分 ###

*  接收文件夹，后续操作

@ResponseBody
    @RequestMapping("/uploadCategory")
    public void uploadCategory(HttpServletRequest request,
                                @RequestParam("file") MultipartFile[] file) 
    
        if (file != null && file.length > 0) {
            for (MultipartFile temp : file) {
                //处理上传的文件
    
                //其他逻辑
            }
        }
    }

[20190613152215427.jpg]: /images/20220115/737c2df57f4644659181d49dafa92ac1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA_size_16_color_FFFFFF_t_70]: /images/20220115/c2ed8e327cd54fa49583f782aac1880c.png
[2019061315225859.jpg]: /images/20220115/03fdc498bd19424781317bd9bb5ba663.png
[20190613152311379.jpg]: /images/20220115/bff719f4d4d54afda93693fdc2e2f256.png