vue + springboot 文件服务器之文件上传

最近想整合一下自己所做的项目，于是需要一个文件服务器来承载项目中所有文件的持久化，以及可视化。

有兴趣可以瞧瞧，其中包含python，java作为后端，k8s+docker服务打包，vue作为前端： https://github.com/oneInsect/magic-box

其中 文件上传作为核心功能，前端使用vue实现，后端使用springboot承载。

用户页面只支持单文件上传，前端代码

          <el-upload
            class="upload-demo"
            drag
            action="http://localhost:80/filemgt/files/file"
            :limit=1
            :on-success="handleSuccess"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">Drag file here or click to upload<em>Click to Upload</em></div>
          </el-upload>

  　　

        handleSuccess(response, file, fileList){

            this.file.name = file.name

        },

后端先接收文件，再接收文件信息

    @PostMapping("file")
    public SelfDefineResponse addFile(@RequestParam(value = "file") MultipartFile uploadFile){
        if (uploadFile == null) {
            return SelfDefineResponse.error().message("Upload error, please choose file");
        }
        if (FileUtil.saveTmpFile(uploadFile)){
            return SelfDefineResponse.ok();
        }else{
            return SelfDefineResponse.error().message("Save tmp file failed");
        }
    }

    @PostMapping("fileinfo")
    public SelfDefineResponse addFileInfo(@RequestBody(required = true) Files files){
        boolean saved = filesService.save(files);
        String fileName = files.getName();
        String filePath = files.getPath();
        if (saved){
            Boolean fileSaved = FileUtil.saveTmpFile2server(fileName, filePath);
            if (fileSaved){
                return SelfDefineResponse.ok();
            }
        }
        return SelfDefineResponse.error();
    }

前端效果

 

 

 

 后端效果：