el-upload上传文件夹及springboot后端实现_el-upload选择文件夹

el-upload上传文件夹及springboot后端实现

点击右面的上传图标选择文件夹

 <el-upload
                          :action="upFiles"
                          :data="{path: wfLabel[i].label_path}"
                          :show-file-list="false"
                          ref="uploadlist"
                          :multiple="true"
                          :on-success="handleAvatarSuccess(i, index)"
                          :before-upload="beforeAvatarUpload"
                      >
                        <i class="el-icon-upload" ></i>
1
2
3
4
5
6
7
8
9
10

用el-upload标签multiple=“true”，上传文件夹原理是单个文件批量上传

 mounted() {
    this.$refs.uploadlist[0].$children[0].$refs.input.webkitdirectory = true;
  },
1
2
3

this.$refs.uploadlist[0].$children[0].$refs.input.webkitdirectory = true;放置位置视情况而定

    /**
     * Auto-Calphad上传文件夹到指定目录   *
     * @param
     * 		path：指定目录
     * @return
     */
    @PostMapping(value = "/uploadFiles")
    public AjaxResult uploadFiles(MultipartFile file,String path) throws IOException {
        String originalFilename = file.getOriginalFilename();
        File filetem = File.createTempFile("temp", null);
        file.transferTo(filetem);   //sourceFile为传入的MultipartFile

        File newfile = new File(path+"\\input-data");  //获取新的文件File对象并生成文件
        if (!(new File(path+"\\input-data")).exists()) {  //判断目标文件夹是否存在不存在则创建
            (new File(path+"\\input-data")).mkdirs();
        }

        FileInputStream in = new FileInputStream(filetem);  //
        FileOutputStream out = new FileOutputStream(newfile+"\\"+originalFilename);
        byte[] buffer=new byte[2097152];
        int readByte = 0;
        //读取旧文件的流写入新文件里
        while((readByte = in.read(buffer)) != -1){
            out.write(buffer, 0, readByte);
        }
        in.close();
        out.close();
        Map map=new HashMap();
        map.put("name","input-data");
        return AjaxResult.success(map);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

这种实现方式访问了多次后端接口。